【jQuery】(6)---jQuery validate插件
jQuery validate插件
一、导入js库
先导入jQuery库，然后导入Validate插件，如果是中文提示还需要导入messages_zh.js。
注意Validate的导入要在jQuery库之后。代码如下：
<script src="jQuery.1.8.3.js" type="text/javascript"></script> <script src="jquery.validate.js" type="text/javascript"></script> <!-- 因为默认是用英文输出错误信息，如果导入下面包就可以默认用中文输出错误信息 --> <script src="messages_zh.js" type="text/javascript"></script>
二、常见默认校验规则
(1)、required:true 必输字段 (2)、email:true 必须输入正确格式的电子邮件 (3)、url:true 必须输入正确格式的网址 (4)、number:true 必须输入合法的数字(负数，小数) (5)、digits:true 必须输入整数 (6)、creditcard:true 必须输入合法的信用卡号 (7)、equalTo:"#password" 输入值必须和#password相同 (8)、accept: 输入拥有合法后缀名的字符串（上传文件的后缀） (9)、maxlength:5 输入长度最多是5的字符串(汉字算一个字符) (10)、minlength:10 输入长度最小是10的字符串(汉字算一个字符) (11)、rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) (12)、range:[5,10] 输入值必须介于 5 和 10 之间 (13)、max:5 输入值不能大于5 (14)、min:10 输入值不能小于10
三.submit提交校验案例
（1）register.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <script type="text/javascript" src="../js/jquery-1.7.1.js"></script> <script type="text/javascript" src="../js/jquery.validate.min.js"></script> <!-- 上面两个导入就可以，下面这个自己写一个校验规则 --> <script type="text/javascript" src="../js/register.js"></script> <html> <head> <style type="text/css" rel="stylesheet"> .wrap{margin:0 auto;width:500px;} .palceholder{ border:solid 1px red;} </style> </head> <body> <div class="wrap"> <h1>注册</h1> <form action="" id="form_register"> <p>用 户 名: <input type="text" name="name" /></p> <p>密 码: <input type="text" name="password" /></p> <p>确认密码: <input type="text" name="password1" /></p> <p>电子邮件: <input type="text" name="emal" /></p> <p>年 龄: <input type="text" name="age" /></p> <p>爱 好：<select name="hobby" id="hobby"> <option value="">请选择</option> <option value="1">唱歌</option> <option value="2">跳舞</option> <option value="3">画画</option> </select> </p> <input type="submit" value="submit提交"> <input type="submit" value="button提交" id="hand" name="hand"> </form> </div> </body> </html>
先看界面效果：很普通的一个界面
(2)register.js
/*首先校验要在$(document).ready()里加入验证规则与错误提示位置*/ $(document).ready(function(){ $("#form_register").validate({
debug:true,//如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。 // 错误提示 rules:{ name:{required:true}, password:{required:true}, password1:{required:true,equalTo: "#password"}, emal:{required:true}, //这里要注意select有个小细节，就是默认的"请选择"的value一定要是"",如果你设置了"-1",那它就默认有值，而不去校验 hobby:{required:true}, age:{required:true,digits:true}, }, messages:{ name:{required:"请输入用户名"}, password:{required:"请输入密码"}, password1:{required:"请输入密码",equalTo: "两次密码输入不一致"}, emal:{required:"请输入电子邮箱"}, hobby:{required:"请选择爱好"}, age:{required:"请输入年龄",digits:"必须为整数"}, }, /* 下面这个很关键： error：错误信息 element：指当前元素 */ errorPlacement:function(error, element){ //我往当前元素添加class属性，然后对这个css样式设置，这样就可以更加清晰显示错误 element.addClass('palceholder'); //添加placeholder属性，属性值就是error.html() element.attr({placeholder:error.html()}); } }); });
(3)当我在界面上点击submit提交的时候看界面
通过样式可以让错误信息更明显
如果我在register.js错误显示方式修改如下：
errorPlacement:function(error, element){ element.addClass('palceholder'); //默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面 error.appendTo(element.parent()); } });
看界面效果：
四.用button提交
我们知道，很多时候我们需要button进行ajax提交，在网上都是这样写：
$("#btn).click(function(){ if($("#form").valid()){ ...... } //本人亲自测试当button提交时这里的$("#form").valid()是不行，会报错
找了好多博客发现有一个是可以的，下面进行代码演示，其它都和上面一样，就register.js我重新写一个
$(document).ready(function(){ $("#hand").bind("click" ,function(){ //编写表单验证函数validform，在验证按钮注册按钮点击事件内调用验证函数对象 if(validform().form()){ alert(验证通过); } }); }); function validform(){ /*关键在此增加了一个return，返回的是一个validate对象，这个对象有一个form方法，返回的是是否通过验证*/ return $("#form_register").validate({ debug:true, rules:{ name:{required:true}, password:{required:true}, password1:{required:true,equalTo: "#password"}, emal:{required:true}, hobby:{required:true}, age:{required:true,digits:true}, }, messages:{ name:{required:"请输入用户名"}, password:{required:"请输入密码"}, password1:{required:"请输入密码",equalTo: "两次密码输入不一致"}, emal:{required:"请输入电子邮箱"}, hobby:{required:"请选择爱好"}, age:{required:"请输入年龄",digits:"必须为整数"}, }, errorPlacement:function(error, element){ element.addClass('palceholder'); error.appendTo(element.parent()); } }); }
当点击button提交按钮时，发现界面也可以进行校验
基本上就这么多，以后用到新的，以后再写。
想的太多，做的太少，中间的落差就是烦恼，要么去做，要么别想 少尉【16】
