validate针对checkbox、radio、select标签的验证
2024-08-31 00:16:52
jQuery.validate 是jquery的一个插件,用来辅助开发者在客户端方便快捷的实现表单验证,最终达到提高用户体验的目的。
示例代码
<form id="formLogin" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
</div>
<div>
<label for="password">password:</label>
<input type="text" id="password" name="password" />
</div>
<div>
<label for="password1">password1:</label>
<input type="text" id="password1" name="password1" />
</div>
<div>
<label for="sex">sex:</label>
<select id="sex" name="sex">
<option id="sexopt" value="" selected="selected">请选择</option>
<option id="sexnan" value="1">男</option>
<option id="sexnv" value="2">女</option>
</select>
</div>
<div>
<label for="favorite">level:</label>
<input type="checkbox" id="sport" name="favorite" value="sport" />sport
<input type="checkbox" id="write" name="favorite" value="write" />write
</div>
<div>
<label for="level">level:</label>
<input type="radio" id="one" name="level" value="one" />1
<input type="radio" id="two" name="level" value="two" />2
</div>
<div>
<input id="submit" type="button" value="submit" />
</div>
</form>
@section scripts{
<script type="text/javascript" src="/content/home/index.js"></script>
}
jquery.validate在定位html标签的时候,默认使用name属性来获取标签,所以需要开发者给需要进行验证的标签都加上name属性,并且赋值。
index.js
$().ready(function () {
$("#formLogin").validate({
rules: {
username: {
required: true
},
password: {
required: true
},
sex: {
required: true
},
level: {
required: true
},
favorite: {
required: true
}
},
messages: {
username: {
required: "please input username"
},
password: {
required: "please input password"
},
sex: {
required: "please select sex"
},
level: {
required: "level requred"
},
favorite: {
required: "favorite required"
}
},
errorPlacement: function (error, element) { //指定错误信息位置
if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
var eid = element.attr('name'); //获取元素的name属性
error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面
} else {
error.insertAfter(element);
}
}
});
});
$("#submit").click(function () {
$("#submit").submit();
});
有时候我们需要使用正则表达式对一些输入进行验证,比如说邮箱,电话号码,或者是用户名必须字母开头并且长度要在5-30位,等等之类的。
jquery.validate默认没有提供正则表达式的验证,但是它提供了一个扩展,我们可以自己添加关于正则表达式的验证规则。
$(function () {
// 判断用户输入的value是否满足传入的正则params的规范
jQuery.validator.addMethod("pattern", function (value, element, params) { if (!params.test(value)) {
return false;
}
return true;
});
});
这样我们就可以像下面这样使用我们自定义的正则表达式验证了。
$().ready(function () {
$("#formLogin").validate({
rules: { tel: {
required:true,
pattern: /^[0-9]+$/
}
},
messages: { tel: {
required:'tel required',
pattern: "regex error"
}
} });
});
怎么样,是不是很酷啊!
$("#formSupplier").validate还有一些其他的参数,跟多的参数可以查看
http://blog.csdn.net/a497785609/article/details/5758613
在这里先介绍两个比较常用的。
errorElement
错误提示的html标签
submitHandler
验证成功之后的操作
$("#formSupplier").validate({
errorElement: "span", submitHandler: function (form) {
if (btnType == 1) { submitUpdateSupplier();
} else {
offShelf();
}
},
rules: {
txtSuUserName: {
required: true,
pattern: regexUsername
}
},
messages: {
txtSuUserName: {
required: "请填写编号!",
pattern: "请注意,编号只能使用3-15位的字母组合!"
}
}
});
最新文章
- c#变量缺少using引用,如何快速加上using,加Using的快捷键[bubuko.com]
- ROC曲线、AUC、Precision、Recall、F-measure理解及Python实现
- Windows Server 2008更改远程桌面端口号
- nginx有关.htaccess小结
- VS 创建虚拟目录失败,映射到其他文件夹!
- (转)Android SlidingTabLayout定制分割线和指示条颜色
- USACO Section 2.3: Zero Sum
- Grunt 初体验
- ASP.net+MVC--2
- TensorFlow 深度学习笔记 Logistic Classification
- web应用中Spring ApplicationContext的动态更新
- Dubbo负载均衡策略
- 【Weblogic】在linux创建domain过慢的解决方法
- Caused by: java.lang.ClassNotFoundException: javax.persistence.Entity
- Vue(三)指令
- laravel5.8笔记六:公共函数和常量设置
- Ubuntu16.04 安装 wps (不推荐安装)
- sqli-labs(十二)(and和or的过滤)
- intellij怎么导入MySQL的驱动包
- Mybatis笔记六:Mybatis中SqlSessionFactoryBuilder/SqlSessionFactory/SqlSession/映射器实例的作用域(Scope)和生命周期
热门文章
- bzoj 1426: 收集邮票【期望dp】
- 【BZOJ4059】Non-boring sequences(分析时间复杂度)
- DFS BestCoder Round #49 ($) 1001 Untitled
- ACM_排序
- PowerDesigner连接Oracle数据库(32位)反向生成物理数据模型
- YumRepo Error: All mirror URLs are not using ftp, http[s] or file
- springboot与dubbo整合入门(三种方式)
- 引入css的四种方式
- px-em-rem单位转换
- CAD使用DeleteXData删除数据(网页版)