文档章节

jquery验证不为空 电子邮箱格式是否正确

管温饱的老徐
 管温饱的老徐
发布于 2017/07/23 19:29
字数 481
阅读 3
收藏 0

   

Jquery代码如下:

<script src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
    function checkForm() {
        //jQuery取得用户输入的name,age,email值  
        var name = $("#clientname").val();
        var pass = $("#password").val();
        var reg = /\w+[@]{1}\w+[.]\w+/;
        var email = $("#email").val();

        //如果名字为空  
        if (name == "") {
            //假如name后面有lable标签,则清空后面的内容,即清除图中红色字体提示的“用户名不能为空”  
            $(".name_lable").empty();
            //接着在类选择器.name后面添加一个lable标签  
            $("#clientname").after(
                    "<label class='name_lable'><font>用户名不能为空</font></label>");

        } else {
            //不为空就清空后面的红色提示,如“用户名不能为空”,使其消失  
            $(".name_lable").empty();
        }
        if (pass == "") {
            //假如name后面有lable标签,则清空后面的内容,即清除图中红色字体提示的“用户名不能为空”  
            $(".password_lable").empty();
            //接着在类选择器.name后面添加一个lable标签  
            $("#password")
                    .after(
                            "<label class='password_lable'><font>密码不能为空</font></label>");
        } else {
            //不为空就清空后面的红色提示,如“用户名不能为空”,使其消失  
            $(".password_lable").empty();
        }
        
        if (reg.test(email)) {
        } else {
            $(".email_lable").empty();
            //接着在类选择器.name后面添加一个lable标签  
            $("#email").after(
                    "<label class='email_lable'><font>email格式不正确</font></label>");
                    return false;
        }

    }
</script>

页面代码如下:

<form name="client_form" action="insert.action" method="get"
        onsubmit="return checkForm()">
        <table>

            <tr bgcolor="#f5f5f5">
                <td><div>
                        <font>*</font> 姓名:
                    </div></td>
                <td><input id="clientname" type="text" name="username" value=""
                    size="30"></td>

            </tr>

            <tr bgcolor="#f5f5f5">
                <td><div>
                        <font>*</font>密码
                    </div></td>
                <td><input type="text" name="password" value="" size="30"
                    id="password"></td>
            </tr>
            <tr bgcolor="#f5f5f5">
                <td><div>电子邮箱</div></td>
                <td><input type="text" name="email" value="" size="30"
                    id="email"></td>
            </tr>
            <tr bgcolor="#f0f0f0">
                <td></td>
                <td colspan="2"><input type="submit" value="提交"> <input
                    type="reset" value="重置"></td>
            </tr>
        </table>
    </form>

    <table>
        <tr bgcolor="#f5f5f5">
            <td bgcolor="#FFFFFF"><em>注意:名称前有*的为必填项</em></td>
        </tr>
    </table>

 

css代码如下:

 

<title>添加客户</title>
<style type="text/css">
table {
    background-color: #CCCCCC;
    border: 1px;
    width: 100%;
}

table tr {
    height: 20px;
}

table tr div {
    text-align: right;
}

td font {
    color: red;
}
</style>

 

 

 

 

 

© 著作权归作者所有

管温饱的老徐
粉丝 0
博文 10
码字总数 1678
作品 0
呼伦贝尔
私信 提问
简单好用的表单校验插件——jQuery Validate基本使用方法总结

jquery validate当前最新版本是1.17.0,下载链接是:https://github.com/jquery-validation/jquery-validation/releases/tag/1.17.0 1.基本用法 从字面就知道既然是jquery的插件,首先得引入...

Gaia_bing
2018/07/20
0
0
jquery验证手机号码、邮箱格式是否正确示例代码

//jquery验证邮箱 function checkSubmitEmail() { if ($("#email").val() == ""){ //$("#confirmMsg").html("<font color='red'>邮箱地址不能为空!</font>"); alert("邮箱不能为空!") $("#e......

易水寒丶开源
2015/11/02
0
0
经典风格的特效源码分享

特效源码分享,废话不多说,直接上源码。 仿hao123网址导航源码HTML整站下载 经典实用的风格,集时间日期、天气预报、邮箱登陆、搜索引擎、名站、酷站、实用工具、分类目录等常用模板,布局合...

牵着蜗牛去西藏
2014/11/14
624
7
26个Jquery使用小技巧

下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X...

长平狐
2012/09/06
151
0
26 个 jQuery使用技巧

The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more usef......

长平狐
2013/01/06
53
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker搭建Mysql集群、主从同步复制

1、创建数据挂载点: mkdir /opt/mysql-master/mysql、/opt/mysql-master/conf.d、/opt/mysql-slave/conf.d、/opt/mysql-slave/conf.d 2、分别在master、slave节点文件目录conf.d下创建touch......

WALK_MAN
31分钟前
3
0
手把手教你做中间件开发(分布式缓存篇)-借助redis已有的网络相关.c和.h文件,半小时快速实现一个epoll异步网络框架,程序demo

本文档配合主要对如下demo进行配合说明: 借助redis已有的网络相关.c和.h文件,半小时快速实现一个epoll异步网络框架,程序demo 0. 手把手教你做中间件、高性能服务器、分布式存储技术交流群 ...

y123456yz
32分钟前
1
0
阿里技术男的成长史:越想证明自己死得越快……

在上海工作8年后,身为部门经理的钱磊,管理着一家ERP公司的百十来号员工,“再往上爬就是老板和他儿子了……从这个领域的技术角度来讲算是做到了顶。”05年,钱磊就开始关注一家名字奇怪,做...

阿里云云栖社区
36分钟前
3
0
Spring-boot单元测试(私有方法测试)

Spring-boot的单元测试网上有了很多,当项目是可以使用spring-boot正常运行时,只要在测试类上添加如下配置就使用@Autowired的方式进行单元测试 @RunWith(SpringJUnit4ClassRunner.class)@...

琴兽
53分钟前
1
0
spring cloud(第一部)框架概述

关于微服务 近几年,'微服务'这个词越来越多的被身边的人所提及,到底什么是微服务,为什么微服务总是伴随着spring cloud被人们所提及,这里笔者结合多年的技术经历跟大家分享下自己的理解:...

白中墨
53分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部