JQuery 【validate】 用法
JS设置
<link href="css/jquery.ui.core.css" rel="stylesheet" type="text/css" /> <link href="css/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" /> <link href="css/jquery.ui.theme.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery.ui.core.js"></script> <script src="js/jquery.ui.datepicker.js"></script> <script src="js/jquery.validate.js"></script> <script src="js/messages_cn.js"></script> <script type="text/javascript"> $(function() { $(".datepicker").datepicker(); }); /// 正则表达式 $.validator.addMethod( "regex", function (value, element, param) { var re = new RegExp(param); return this.optional(element) || re.test(value); }, "Please check your input." ); $(document).ready(function(){ //通过id查找要进行校验的表单 $("#myForm").validate({ //设置校验触发的时机,默认全是true。不要尝试去设置它为true,可能会有js错误。 //onsubmit:false, //onfocusout:false, //onkeyup:false, //onclick:false, //验证通过后执行的动作 //success:function(label){ // label.text("ok!").addClass("success"); //}, //手动设置错误信息的显示方式 errorPlacement: function(error, element) { // error.appendTo(element.parent().next()); // if ( element.is(":radio") ) // error.appendTo( element.siblings("span") ); // else if ( element.is(":checkbox") ){ // error.appendTo ( element.siblings("span") ); // } // else // error.appendTo( element.parent() ); error.appendTo(element.next("span")); } , rules:{ name:{ required: true, rangelength: [ 6, 8 ] }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" //此处通过id指向 }, sex: { required: true }, email: { required: true, email: true }, language: { required: true, rangelength:[2,3] }, book: { required: true, rangelength:[2,3] }, agree: "required", upload: { required: true, accept: "flv|jpg" }, regexText:{ required:true, regex:/^\d{18}$/ } }, //校验提示信息 messages: { name: { required: "请输入用户名", rangelength: "用户名长度必须为{0}到{1}个字符或汉字" }, password: { required: "请输入密码", minlength: "密码的最小长度是{0}个字符" }, confirm_password: { required: "请输入确认密码", minlength: "确认密码的最小长度是{0}个字符", equalTo: "两次密码不相同" }, email: "请输入正确的邮箱", language: { required: "该项必须填写", rangelength: "请您选择{0}到{1}项语言" }, book: { required: "该项必须选择", rangelength:"请您选择{0}到{1}本书" }, agree: "您没有同意使用协议", upload: { required: "请输入上传文件的路径", accept: "上传文件的格式只能是 flv或jpg" }, regexText:{ required:‘必须输入要求格式的文本‘, regex:"请输入正确的文本" } }//end messages });//end valiadate });//end ready </script>
修改默认提示文本:messages_cn.js
jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});
表单:
<form action="" method="get" id="myForm"> <label for="name">姓名:</label> <input name="name" type="text" /><span></span><br/><br/> <label>性別:</label> 男<input type="radio" name="sex"/>女<input type="radio" name="sex"/><span></span><br/><br/> <label for="birthday">出生日期:</label> <input name="birthday" type="text" class="datepicker" readonly="true" /><span></span><br/><br/> <label for="email">邮箱:</label> <input name="email" type="text" /><span></span><br/><br/> <label for="password">密码:</label> <input id="password" name="password" type="password" /><span></span><br/><br/> <label for="confirm_password">确认密码:</label> <input name="confirm_password" type="password" /><span></span><br/><br/> <label for="regexText">正则文本(18位数字):</label> <textarea name="regexText" type="text" cols=10 rows=5></textarea><span></span><br/><br/> <input id ="submit" type="submit" class="submit" value="Submit"/> </form>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。