Jquery validate插件之表单校验

来源：互联网发布：基于unity3d的格斗类编辑：程序博客网时间：2024/05/22 02:30

需求：
通过validate插件来校验表单,validate是别人封装好的第三方工具

技术分析：
jqery validate

一、validate使用步骤：
1. 导入jquery.js
2. 导入validate.js
3. 在页面加载成功后，对表单进行校验 $(“选择器”).validate()
4. 在validate中编写校验规则

$("选择器").validate({        rules:{},        messages:{}        });

二、默认校验规则

(1)required:true 必输字段
(2)remote:”check.php” 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期日期校验ie6出错，慎用
(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
三、更改错误信息显示的样式

设置错误提示的样式，可以增加图标显示，在该系统中已经建立了一个validation.css专门用于维护校验文件的样式

<style>input.error { border: 1px solid red; }label.error {  background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;  padding-left: 16px;  padding-bottom: 2px;  font-weight: bold;  color: #EA5200;}label.checked {  background:url("./demo/images/checked.gif") no-repeat 0px 0px;}</style>

例子：

<html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="../js/jquery-1.11.0.js" type="text/javascript"></script>        <!--validate校验库-->        <script src="../js/jquery.validate.js" type="text/javascript"></script>        <!--国际化库，中文提示-->        <script src="../js/messages_zh.js" type="text/javascript"></script>        <script type="text/javascript">            $(function () {                $("#formId").validate({                    rules:{                        //字段的name属性："校验器"                        //字段的name属性：{校验器："值",校验器："值"}                        username:"required",                        password:{                            required:true,                            digits:true                        },                        repassword:{                            equalTo:"[name=password]"                        },                        zuixiaozhi:{                            min:3                        },                        shuzhiqujian:{                            range:[5,10]                        }                    },                    messages:{                        //字段的name属性："提示内容"                        //字段的name属性：{校验器："提示内容",校验器："提示内容"}                        username:"请填写用户名，用户名不能为空",                        password:{                            required:"密码不能为空",                            digits:"密码只能是数字"                        },                        repassword:{                            equalTo:"两次输入的内容不一致"                        },                        zuixiaozhi:{                            //第一个约束的索引                            min:"最小值应该大于{0}"                        },                        shuzhiqujian:{                            range:"输入的范围在{0}~{1}之间"                        }                    }                });            })        </script>    </head>    <body>         <form id="formId" action="">            必填：<input type="text" name="username"/> <br/>            必填数字：<input type="text" name="password"/> <br />            必填重复：<input type="text" name="repassword"/> <br />            最小值：<input type="text" name="zuixiaozhi"/> <br />            区间：<input type="text" name="shuzhiqujian"/> <br />            <input type="submit" value="提交"/>        </form>    </body></html>

阅读全文

0 0