文档章节

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
Struts2 整合jQuery实现Ajax功能

Struts2 整合jQuery实现Ajax功能 技术领域很多东西流行,自然有流行的道理,这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美。 首先明确个概念: jQuery是什么:是...

孙斐
2011/10/12
0
2
jQuery.Validate客户端验证使用介绍

在日常项目中表单验证算是最常见的了,使用一个好的js库可以使我们的工作事半功倍。jQuery.Validate无疑就是一个不错的选择。 jQuery.Validate,这个验证库是属于jQuery的插件,是由bassist...

Edens_Song
2012/09/17
0
0
学习zepto.js(Hello World)

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。 昨天听说了zepto.js,正好最近也比较闲,所以就学习一下这个著名D...

贾顺名
2015/08/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
40分钟前
0
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
42分钟前
0
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
2
0
20180921 su与sudo命令、限制root用户通过ssh远程登录

su 命令 用户切换。 su # 切换到root用户su username # 切换到username用户# su 后面加-时,会初始化当前用户的各种环境su - username # 指定用户执行某些命令 su - -c "touch /tm...

野雪球
今天
2
0
Windows 下双 Python 开发环境配置

Windows 下双 Python 开发环境配置作者:老农民(刘启华)QQ: 46715422Email: 46715422@qq.com微信: 46715422 本人曾经在 Windows 下被两个版本环境折腾够呛,现在总结两个 Python...

新疆老农民
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部