jquery.validate验证text,checkbox,radio,selected
2015-11-03 16:57
519 查看
index.cshtml
index.js
<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> }
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(); });
相关文章推荐
- jQuery-1.9.1源码分析系列(一)整体架构续
- jQuery表单对象属性过滤选择器
- jQuery子元素过滤选择器
- php+mysql+jquery 简易的检索自动补全提示
- jQuery属性过滤选择器
- 点击淡入淡出jquery
- Jquery 事件冒泡 以及阻止默认事件
- jQuery-1.9.1源码分析系列(一)整体架构
- 三、jQuery--jQuery基础--jQuery基础课程--第11章 jQuery 工具类函数
- 两种方法基于jQuery实现IE浏览器兼容placeholder效果【转】
- JQuery中的prop和attr
- 理解jquery的$.extend()、$.fn和$.fn.extend()
- 前端学习笔记(zepto或jquery)—— 布局技巧(一)
- jQuery 可见性过滤选择器
- jQuery uploadify-v3.1 批量上传
- jQuery内容过滤器
- jquery操作DOM 元素(3)
- jQuery学习笔记之概念(1)
- jQuery学习笔记之概念(1)
- 夺命雷公狗jquery---62通过$.getJSON来解决Ajax跨域请求问题