文档章节

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

管温饱的老徐
 管温饱的老徐
发布于 2017/07/23 19:29
字数 481
阅读 2
收藏 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
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

没有更多内容

加载失败,请刷新页面

加载更多

ArrayList的实现原理以及实现线程安全

一、ArrayList概述 ArrayList是基于数组实现的,是一个动态的数字,可以自动扩容。 ArrayList不是线程安全的,效率比较高,只能用于单线程的环境中,在多线程环境中可以使用Collections.syn...

一看就喷亏的小猿
13分钟前
0
0
Netty 备录 (一)

入职新公司不久,修修补补1个月的bug,来了点实战性的技术---基于netty即时通信 还好之前对socket有所使用及了解,入手netty应该不是很难吧,好吧,的确有点难,刚看这玩意的时候,可能都不知道哪里...

_大侠__
昨天
4
0
Django简单介绍和用户访问流程

Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。 Django是一个开放源代码的Web应用框架,由Python写成。 Django遵守BSD版权,初...

枫叶云
昨天
8
0
EOS错误代码及中文释义

本文集汇总了EOS区块链常见错误代码及其含义,完整错误代码集请查看 EOS错误代码集 - 汇智网 EOS错误代码列表如下, <table class="table table-striped"> <thead> <tr><th>错误代码</th><t......

汇智网教程
昨天
4
0
Spring Cloud Stream消费失败后的处理策略(四):重新入队(RabbitMQ)

应用场景 之前我们已经通过《Spring Cloud Stream消费失败后的处理策略(一):自动重试》一文介绍了Spring Cloud Stream默认的消息重试功能。本文将介绍RabbitMQ的binder提供的另外一种重试...

程序猿DD
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部