jquery的validate.js 和 form.js 的使用方法
2015-09-08 13:42
639 查看
在使用 Jquery 的方法的验证并且修改 原Form 表单的提交方式的时候,需要引用的文件有
<script type="text/javascript" src="js/jquery-1.8.3-min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
如下的代码为页面添加了相应的验证和修改了提示信息,并且重写了表单提交的方法和添加自定义的身份证验证方法
<script type="text/javascript" src="js/jquery-1.8.3-min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
如下的代码为页面添加了相应的验证和修改了提示信息,并且重写了表单提交的方法和添加自定义的身份证验证方法
jQuery.validator.addMethod("isIDCard", function (value, element) { return this.optional(element) || (checkIDCard(value)); }, "请正确填写您的身份证码"); /*-------注册验证-----------*/ $().ready(function () { $("#signupForm").validate({ rules: { userName: { required: true }, telphone: { required: true, rangelength: [11, 11], digits: "只能输入整数" }, password: { required: true, rangelength: [8, 16] }, confirm_password: { required: true, equalTo: "#User_Pwd", rangelength: [8, 16] }, IDCard: { required: true, isIDCard: true }, email: { required: true, email: true } }, messages: { userName: { required: "请输入用户名" }, telphone: { required: "请输入手机号", rangelength: jQuery.format("请输入正确的手机号"), }, password: { required: "请输入密码", rangelength: jQuery.format("密码在8~16个字符之间"), }, confirm_password: { required: "请输入确认密码", rangelength: jQuery.format("密码在8~16个字符之间"), equalTo: "两次输入密码不一致" }, IDCard: { required: "请输入身份证号码", isIDCard: "请正确填写您的身份证号码" }, email: { required: "请输入邮箱", email: "邮箱格式不正确" } }, submitHandler: function (form) { alert("submitted"); //$.post("/API/SysMenu/UserMain.ashx", { func: "Register", data: formToJson("#signupForm") }, function (obj) { // if (obj.Status == apiok) { // } //}, "json"); $(form).ajaxSubmit({ type: "post", url: "/API/SysMenu/UserMain.ashx", dataType: "json", data: { func: "Register", data: formToJson("signupForm") }, success: function (result) { //返回提示信息 alert("ok"); } }); } }); });
<div class="wrapper"> <form id="signupForm" class="zcform"> <p class="clearfix"> <label class="one" for="userName">用户名:</label> <input id="User_Account" name="User_Account" class="myinput required" value="" placeholder="用户名" /> </p> <p class="clearfix"> <label class="one" for="Phone">手机号码:</label> <input id="Phone" name="Phone" class="myinput required" value="18782463597" placeholder="请输入手机号" /> </p> <p class="clearfix"> <label class="one">校验码:</label> <input id="code" class="identifying_code" type="text" placeholder="请输入手机6位校验码" /> <input class="get_code" type="button" style="color:#fff;" value="获取验证码" /> </p> <p class="clearfix"> <label class="one" for="User_Pwd">登录密码:</label> <input id="User_Pwd" name="User_Pwd" type="password" value="12312312" class="myinput {required:true,rangelength:[8,20],}" placeholder="请输入密码" /> </p> <p class="clearfix"> <label class="one" for="confirm_password">确认密码:</label> <input id="confirm_password" name="confirm_password" type="password" value="12312312" class="myinput {required:true,equalTo:'#password'}" placeholder="请再次输入密码" /> </p> <p class="clearfix"> <label class="one" for="DocumentNum">身份证号:</label> <input id="DocumentNum" name="DocumentNum" class="myinput required" value="510922199107300176" placeholder="身份证号" /> </p> <p class="clearfix"> <label class="one" for="Email">邮箱:</label> <input id="Email" name="Email" type="text" class="myinput required" value="123@123.com" placeholder="邮箱" /> </p> <p class="clearfix"><input class="myinput submit" type="submit" value="立即注册" /></p> <p class="last"><a href="#">立即登录></a></p> </form> </div>
相关文章推荐
- JavaSE 国际化 、 struts2封装国际化、jQuery插件国际化
- JQuery实现鼠标经过事件
- jQuery中$(function() {});问题详解
- jquery select 选择
- 安卓遇上JqueryMobile(持续更新篇)
- 解决同一页面jQuery多个版本或和其他js库冲突方法
- jquery easyui datagrid 对数据格式化(日期格式)
- jquery dataTable 入门
- jQuery EasyUI API 中文文档 - ValidateBox验证框
- jQuery日期和时间插件(精确到秒[jquery-ui-timepicker-addon.js])
- Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法
- jQuery中,选择器既匹配开头又匹配结尾
- jquery封装 [全选] 语句,简单调用即可
- jquery 遍历
- JQuery Ajax Post实例
- jQuery判断动画是否执行完成
- jQuery判断动画是否执行完成
- 《转》学习JQuery该掌握的内容
- 360对jquery的html()兼容性问题
- 【jQuery】 用jQuery和div实现复选框