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>
jv4-1.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>
jv4-2.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>
jv4-3.html
对于提示语句的位置，就不说太多了，因为一般使用默认的位置也就行了。
只要你善用选择器，那个位置真的是任意定。
jQuery Validate(三)的更多相关文章
- jquery.validate+jquery.form提交的三种方式
原文:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种 ...
- jQuery Validate 表单验证 — 用户注册简单应用
相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
- jQuery验证控件jquery.validate.js使用说明
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- jquery.validate.js插件使用
jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...
- jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
随机推荐
- Python 函数的一般形式及参数
#!/usr/bin/env python # -*- coding:utf-8 -*- # @Time : 2017/11/01 21:46 # @Author : lijunjiang # @Fi ...
- LeetCode OJ-- N-Queens **
https://oj.leetcode.com/problems/n-queens/ n皇后问题,1皇后有1个解,4皇后2个解,8皇后也有解…… 每个皇后不能在同一行上,同一列上,以及同一条45度线上 ...
- 转载自——Json.Net如何在序列化之前修改属性值
今天写一个Json.net比较偏门的用法,也许你很久都用不到,也许你明天就能派上用场. 我们都知道 Json.net 序列话的用法 Test test = new Test() { A = " ...
- 参数化2--CSV Data Set Config 参数化配置
众所周知,在进行接口测试的过程中,需要创建不同的场景(不同条件的输入,来验证不同的入参的返回结果).因而,在日常的自动化接口监控或商品监控等线上监控过程中,需要配置大量的入参来监控接口的返回是否正确. ...
- ajax跨域解决办法
在使用jquery的ajax作请求时,http://127.0.0.1:8080,类似这样的一个本地请求,会产生跨域问题, 解决办法一: jsonp: var url= "http://12 ...
- 228. 汇总区间（leetcode）
#整体思路:使用堆栈,在Python中可以使用列表代替:如果a[i]-a[i-1]==1,就要将a[i]合并到之前的区间里,#所以我们队首位元素开辟一个区间为[a[0],a[0]]#做最后汇总时候,如 ...
- 给java类加static修饰编译器会说什么？
Illegal modifier for the class XXX;only public abstract & final are permitted.
- 【C语言天天练（十一）】深入理解指针
引言:在C语言中.指针的地位是不言而喻的,要想非常好的掌握C语言,掌握指针是必须的,这也是C语言不同于其它语言的地方. (一)指针的指针 样例: int i; int *pi;/*把pi初始化为指向变 ...
- appium在MAC上环境搭建
1. 安装.启动Appium bixiaopeng@bixiaopeng ~$ npm install -g appium Password: npm http GET https://registr ...
- websocket聊天时，图片压缩处理（url或者input-file）
业务背景:私信聊天,需要发送图片,但是图片过大需要压缩处理.此时只有图片url,可以使用以下方法:canvasDataURL(url, 目标图片宽度,图片要显示区域的父元素) 注:该文件包含了inpu ...