jQuery Validate(三)
这里，我们再说说radio、checkbox、select的验证方式。
1、用新版的写法进行验证。
<!DOCTYPE html> <html> <head> <script src="js/jquery.js"></script> <script src="js/jquery.validate.js"></script> <script> $().ready(function() { $("#registerForm").validate(); }); </script> <style> #registerForm label.error { margin-left: 10px; color: red; } </style> </head> <body> <form id="registerForm" method="get" action=""> <fieldset> <!-- radio的验证 --> 性别 <span><br/> 男<input type="radio" id="gender_male" value="m" name="gender" required="true" data-msg-required="性别不能为空"/><br /> 女<input type="radio" id="gender_female" value="f" name="gender" /> </span> <!-- checkbox的验证 --> <br/>最少选择两项 <span><br /> 选项1<input type="checkbox" id="check_1" value="1" name="checkGroup" required="true" data-msg-required="必须选择" minlength=2 data-msg-minlength="至少选择2项"/><br /> 选项2<input type="checkbox" id="check_2" value="2" name="checkGroup" /><br /> 选项3<input type="checkbox" id="check_3" value="3" name="checkGroup" /><br /> </span> <!-- select的验证 --> <br/>下拉框 <span><br /> <select id="selectbox" name="selectbox" required="true" data-msg-required="必须选择"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </span> <p> <input type="submit" value="提交"> </p> </fieldset> </form> </body> </html>
这种写法要注意一点，对于同一组的标签加验证规则，只能加在第一个标签里。例如性别那个标签组，规则 required="true" data-msg-required="性别不能为空" 只能放在第一个type等于radio的input里(也就是男后面的那个input)，如果把验证规则放在后一个标签是无法正常验证的。
2、通过JavaScript自定义规则
<!DOCTYPE html> <html> <head> <script src="js/jquery.js"></script> <script src="js/jquery.validate.js"></script> <script> $().ready(function() { $("#registerForm").validate({ rules : { gender : { required : true }, checkGroup : { required : true, minlength:2 }, selectbox : { required : true } }, messages : { gender : { required : '性别不能为空' }, checkGroup : { required : '必须选择', minlength:'至少选择{0}项' }, selectbox : { required : '必须选择' } } }); }); </script> <style> #registerForm label.error { margin-left: 10px; color: red; } </style> </head> <body> <form id="registerForm" method="get" action=""> <fieldset> <!-- radio的验证 --> 性别 <span><br/> 男<input type="radio" id="gender_male" value="m" name="gender"/><br /> 女<input type="radio" id="gender_female" value="f" name="gender" /> </span> <!-- checkbox的验证 --> <br/>最少选择两项 <span><br /> 选项1<input type="checkbox" id="check_1" value="1" name="checkGroup" /><br /> 选项2<input type="checkbox" id="check_2" value="2" name="checkGroup" /><br /> 选项3<input type="checkbox" id="check_3" value="3" name="checkGroup" /><br /> </span> <!-- select的验证 --> <br/>下拉框 <span><br /> <select id="selectbox" name="selectbox"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </span> <p> <input type="submit" value="提交"> </p> </fieldset> </form> </body> </html>
在前面，我提到过自定义规则里rules和messages里的key用的是标签的name属性值，当时我也疑惑，为什么不直接用ID。刚才的代码，已经说明了原因。如果用的是ID，那么对于radio、checkbox这种通过name属性的值进行分组的标签，那可就没法进行验证了。
当然，如果你想让验证规则可以重用，那你也可以把它单独抽取出来，保存在一个JS文件里，然后在需要的页面引入。
接下来，说说提示语句的位置问题吧，也许你不想让提示语句显示在那个位置，那么没关系。
提示语句的位置是允许我们自定义的，十分的灵活。
<!DOCTYPE html> <html> <head> <script src="js/jquery.js"></script> <script src="js/jquery.validate.js"></script> <script> $().ready(function() { $("#registerForm").validate({ rules : { gender : { required : true }, checkGroup : { required : true, minlength:2 }, selectbox : { required : true } }, messages : { gender : { required : '性别不能为空' }, checkGroup : { required : '必须选择', minlength:'至少选择{0}项' }, selectbox : { required : '必须选择' } }, errorPlacement: function(error, element) { if ( element.is("input[type=radio][name='gender']") )//通过选择器来判断 error.appendTo($("#eradio")); //通过选择器来查找指定元素 else if ( element.is(":checkbox") ) //这里有各种各样的查找方式，只要是满足语法的，都可以。 error.appendTo ( $("#echeckbox")); //完全可以满足你的任意位置的需求。 else error.appendTo( $("#eother")); } }); }); </script> <style> #registerForm label.error { margin-left: 10px; color: red; } </style> </head> <body> <form id="registerForm" method="get" action=""> <label id="eradio">单选提示信息：</label><br/> <label id="echeckbox">多选提示信息：</label><br/> <label id="eother">其他提示信息：</label><br/> <fieldset> <!-- radio的验证 --> 性别 <span><br/> 男<input type="radio" id="gender_male" value="m" name="gender"/><br /> 女<input type="radio" id="gender_female" value="f" name="gender" /> </span> <!-- checkbox的验证 --> <br/>最少选择两项 <span><br /> 选项1<input type="checkbox" id="check_1" value="1" name="checkGroup" /><br /> 选项2<input type="checkbox" id="check_2" value="2" name="checkGroup" /><br /> 选项3<input type="checkbox" id="check_3" value="3" name="checkGroup" /><br /> </span> <!-- select的验证 --> <br/>下拉框 <span><br /> <select id="selectbox" name="selectbox"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </span> <p> <input type="submit" value="提交"> </p> </fieldset> </form> </body> </html>
对于提示语句的位置，就不说太多了，因为一般使用默认的位置也就行了。
只要你善用选择器，那个位置真的是任意定。
