JQuery表单验证【八】

-- 表单验证的validation插件 --
一.jQuery插件的概述
jQuery提供了第三方插件支持功能,任何的第三方厂商都可以针对jQuery再开发新的功能
对jQuery的功能进行增强,称为jQuery的插件

validate插件作用:就是用来对用户在表单上输入的数据进行验证,如果验证不通过,表单不能提交。
验证原则:已经创建了一些通用的验证器,我们直接使用验证器就可以了。
1) 指定验证器的名字
2) 出错信息


二.validate插件的使用步骤
1. 使用步骤:
1) 下载jquery-validation插件
2) 将该插件(也就是一个js文件)导入到我们的工程中
3) 在要使用验证插件的html中引入该js文件
  3.1) 先导入jQuery(lib目录下)
  3.2) 导入验证框架:jquery.validate.js或jquery.validate.min.js (在dist目录下)
  3.3) 如果要让默认信息提示中文,可以导入messages_cn.js (在dist\localization\目录下)

验证器:"出错误的信息"
required: "必填字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",


2. 语法:
$("表单对象").validate({
rules: 验证规则,
messages: 出错信息
});

三.常用的验证规则
1. 默认的验证规则:
1) required:true 必须输入的字段。
2) remote:"check.jsp" 使用 ajax 方法调用 check.jsp 验证输入值。
3) email:true 必须输入正确格式的电子邮件。
4) url:true 必须输入正确格式的网址。
5) date:true 必须输入正确格式的日期。既验证格式,又验证有效性。
6) dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7) number:true 必须输入合法的数字(负数,小数)。
8) digits:true 必须输入整数。
9) creditcard: 必须输入合法的信用卡号。
10) equalTo:"#field" 输入值必须和 #field 相同。
11) accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
12) maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
13) minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
14) rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。数组的写法
15) range:[5,10] 输入值必须介于 5 和 10 之间。
16) max:5 输入值不能大于 5。
17) min:10 输入值不能小于 10。

2. 注:一个表单项可以同时使用多个验证器,如果上一个验证器失败,则不会继续运行下一个验证器。

3. 修改消息的显示位置:
自己写个label,放在信息显示的信息,设置display: none
<label for="gender" class="error" style="display: none">请选择一个性别</label>

四.自定义验证规则
1. 什么时候使用:
如果自带的验证器不能满足需要的时候,我们可以写自定义的验证器

2. 语法:
$.validator.addMethod("验证器名字", function(value, element, params));
value: 表示表单控件中输入的值,如:文本框输入值
element: 表单控件对象,如:文本框
params: 验证器后写的参数,如:max:5,params就是5

返回true,表示验证通过,false表示验证失败

3. 示例:验证身份证的长度必须是15或18位
1) 文本框输入:
<input type="text" name="idcard" id="idcard"/>

2) 验证代码:
2.1) 验证规则:
a) 必须输入
b) 长度是15或18
c) 15位要全是数字
d) 18位最后一位可以是X


2.2) 验证信息:
required: "身份证号不能为空",
cardlength: "身份证长度必须是15位或18位",
cardformat15:  "15位必须全是数字",
cardformat18:  "18位身份证格式不正确"

3) 创建自定义验证器:
3.1) 验证身份证的长度必须是15或18位,去掉空格。
3.2) 验证15位身份证的格式,全是数字
3.3) 验证18位身份证格式,18位数字或17位数字加X
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- 导入jquery -->
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <!-- 验证框架 -->
        <script type="text/javascript" src="js/jquery.validate.min.js"></script>
        <!-- 错误信息 -->
        <script type="text/javascript" src="js/messages_cn.js"></script>
        
        <title>我的jquery表单校验页面</title>
        <style type="text/css">
p {
text-align: center;
font-size: 24px;
}
table {
margin: 0 auto;
border: 0;
}
table tr {
height: 40px;
border: 0;
}
table tr td {
padding: 0 14px;
border: 1px solid #999
}
.error {
color: red
}
        </style>
    </head>
    <body>
        <p>
            员工信息录入
        </p>
        <form name="empForm" id="empForm" method="post" action="test.html">
            <table border=1>
                <tr>
                    <td>真实姓名(不能为空 ,没有其他要求)</td>
                    <td>
                    <input type="text" id="realname" name="realname" />
                    </td>
                </tr>
                <tr>
                    <td>登录名(登录名不能为空,长度应该在5-8之间):</td>
                    <td>
                    <input type="text" id="username" name="username" />
                    </td>
                </tr>
                <tr>
                    <td>密码(不能为空,长度6-12字符或数字):</td>
                    <td>
                    <input type="password" id="psw"  name="psw" />
                    </td>
                </tr>
                <tr>
                    <td>重复密码(不能为空,长度6-12字符或数字):</td>
                    <td>
                    <input type="password" id="psw2" name="psw2" />
                    </td>
                </tr>
                <tr>
                    <td>性别(必选其一)</td>
                    <td>
                    <input  type="radio" id="gender_male" value="m" name="gender"/>
                    &nbsp;男&nbsp;&nbsp;
                    <input  type="radio" id="gender_female" value="f" name="gender"/>
                    &nbsp;女 
                    <label for="gender" class="error" style="display: none">请选择一个性别</label>
                    </td>
                </tr>
                <tr>
                    <td>年龄(必填26-50):</td>
                    <td>
                    <input type="text" id="age" name="age" />
                    </td>
                </tr>


                <tr>
                    <td>你的学历:</td>
                    <td>
                    <select name="edu" id="edu">
                        <option value="">-请选择你的学历-</option>
                        <option value="a">专科</option>
                        <option value="b">本科</option>
                        <option value="c">研究生</option>
                        <option value="e">硕士</option>
                        <option value="d">博士</option>
                    </select></td>
                </tr>


                <tr>
                    <td>出生日期(1982/09/21):</td>
                    <td>
                    <input type="text" id="birthday"  name="birthday" value="" />
                    </td>
                </tr>


                <tr>
                    <td>兴趣爱好:</td>
                    <td colspan="2">
                    <input type="checkbox" name="hobby" id="qq1" value="0"/>
                    &nbsp;乒乓球 &nbsp;
                    <input type="checkbox" name="hobby" id="qq2" value="1" />
                    &nbsp;羽毛球 &nbsp;
                    <input type="checkbox" name="hobby" id="qq3" value="2" />
                    &nbsp;上网 &nbsp;
                    <input type="checkbox" name="hobby" id="qq4" value="3" />
                    &nbsp;旅游 &nbsp;
                    <input type="checkbox" name="hobby" id="qq5" value="4" />
                    &nbsp;购物 &nbsp; </td>
                </tr>
                <tr>
                    <td align="left">电子邮箱:</td>
                    <td>
                    <input type="text" id="email" name="email" />
                    </td>
                </tr>
                <tr>
                    <td align="left">身份证(15或18,15位全是数字,18位最后一位可以是X):</td>
                    <td>
                    <input type="text" id="idcard" name="idcard" />
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                    <input type="submit"  name="firstname"  id="firstname" value="保存">
                    </td>
                </tr>
            </table>
        </form>


        <script type="text/javascript">
            //自定义的验证器
            $.validator.addMethod("cardlength", function(value, element, param){
                //验证长度必须是15或18
                if (value.trim().length == param[0] || value.trim().length == param[1]) {
                    return true;
                }
                return false;
            });
            
            //15位全数字
             $.validator.addMethod("cardformat15", function(value, element, param){
                if (param) {
                    if (value.trim().length == 15) {
                        return /^\d{15}$/.test(value);
                    }
                }
                return true;
              });
              
              //18位
               $.validator.addMethod("cardformat18", function(value, element, param){
                   if (param) {
                        if (value.trim().length == 18) {
                            return /^\d{17}X|\d{18}$/i.test(value.trim());
                        }
                   }
                   return true;
               });
            
            //表单对象的方法
            $("#empForm").validate({
                //验证器
                rules: {
                    //使用的是name属性,不是id
                    realname: {
                        required: true
                    },
                    //用户名
                    username: {
                        required: true,
                        rangelength:[5,8]
                    },
                    //密码
                    psw: {
                         required: true,
                         rangelength:[6,12]
                    },
                    //确认密码
                    psw2: {
                        required: true,
                        rangelength:[6,12],
                        equalTo:"#psw"
                    },
                    //性别
                    gender: {
                        required: true
                    },
                    //年龄
                    age: {
                        required: true,
                        range:[26,50]
                    },
                    //生日
                    birthday: {
                        required: true,
                        date: true
                    },
                    //邮箱
                    email: {
                        //验证器
                        required: true,
                        email: true
                    },
                    //验证身份证
                    idcard: {
                        required: true,
                        //验证长度必须是15或18
                        cardlength: [15,18],
                        //验证15格式:必须全是数字
                        cardformat15: true,
                        //验证18位格式:前17个是数字,最后1个可以是X,也可以18位全是数字
                       cardformat18: true
                    }
                },
                //出错信息
                messages: {
                    realname: "真实姓名不能为空",
                    idcard: {
                        cardlength: "长度必须是15或18",
                        cardformat15: "15位必须全是数字",
                        cardformat18: "18位的格式不正确"
                    }
                }
            });
        </script>
    </body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值