引入JS:
<script type="text/javascript" src="__ADMIN__/validatas/jquery-1.11.1.js"></script> <script type="text/javascript" src="__ADMIN__/validatas/jquery.validate.js"></script>
示例:
<script> $(function () { //自定义验证文件方法 jQuery.validator.addMethod("files", function (value, element, params) { var reg = new RegExp("\.(" + params + ")$", "i"); return reg.test(value); }, $.validator.format("文件类型必须为{0}")); //自定义验证账号方法 jQuery.validator.addMethod("isaccount", function (value, element, params) { var reg = new RegExp("^[^0-9][a-z0-9_]{6,18}$", "i"); return reg.test(value); }, "账号不合法"); //自定义手机号码验证 jQuery.validator.addMethod("phones", function (value, element, params) { var reg = new RegExp("^[1][3,4,5,7,8][0-9]{9}$", "i"); return reg.test(value); }, "手机号码不正确"); $("#ff1").validate({ debug: false, //调试模式 false 阻止表单提交 onkeyup: false, //禁用键盘抬起ajax请求 errorElement: 'span', //设置错误提示标签 success: function (span) { //成功后的样式 $(span).attr('class', 'ok').prev('input').css({ 'border': '1px solid #3c763d' }); }, errorPlacement: function (span, element) { $(element).siblings().remove('span'); $(element).parent().append(span); //错误消息追加到父元素最后 }, //验证规则 rules: { //验证字段 name: { //必填 required: true, }, email: { required: true, email: true, //ajax远程验证 POST 提交解决ie缓存问题 remote: { url: "{:url('getemail')}", type: "POST" } }, age: { required: true, number: true, max: 60, }, password: { required: true, rangelength: [6, 12] //范围验证 6-12位 }, repassword: { required: true, equalTo: "#pass" //确认密码 #pass是密码框的id }, city: { required: true, }, like: { required: true, }, files: { required: true, //自定义验证方法 files: "jpeg|jpg|png|gif" }, account: { required: true, isaccount: $("#account").val() }, phone: { required: true, phones: $("#phone").val() } }, //自定义验证消息 messages: { name: { //必填 required: "姓名不能为空", }, email: { required: "邮箱不能为空", email: "邮箱格式不正确", remote: "邮箱名称被占用" }, age: { required: "年轻不能为空", number: "年龄必须是有效数字", max: "年龄不能超过岁" }, password: { required: "密码不能为空", rangelength: $.validator.format("密码必须在{0}--{1}之间") }, repassword: { required: "确认密码不能为空", equalTo: "两次输入的密码不一致" //确认密码 #pass是密码框的id }, city: { required: "所选城市不能为空", }, like: { required: "请选择一个爱好", }, files: { required: "请上传文件", }, account: { required: "账号不能为空", }, phone: { required: "手机号不能为空", } } }); }); </script>
中文提示:
$.extend($.validator.messages, { required: "这是必填字段", remote: "请修正此字段", email: "请输入有效的电子邮件地址", url: "请输入有效的网址", date: "请输入有效的日期", dateISO: "请输入有效的日期 (YYYY-MM-DD)", number: "请输入有效的数字", digits: "只能输入数字", creditcard: "请输入有效的信用卡号码", equalTo: "你的输入不相同", extension: "请输入有效的后缀", maxlength: $.validator.format("最多可以输入 {0} 个字符"), minlength: $.validator.format("最少要输入 {0} 个字符"), rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"), range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"), max: $.validator.format("请输入不大于 {0} 的数值"), min: $.validator.format("请输入不小于 {0} 的数值") });
表单模拟提交:
//http://malsup.com/jquery/form/ ajaxForm 插件下载地址 //表单提交 $.validator.setDefaults({ submitHandler: function(form) { //模拟 submit 提交 jQuery(form).ajaxSubmit({ type:"POST", dataType:"JSON", url:$(this).attr('action'), beforeSubmit:function (formData,jqForm,options) { $("button[type=submit]").html('登录中...').attr('disabled','disabled'); layer.msg('数据验证中...', {icon: 16,shade: 0.01}); }, success:function (response,status) { var icon = response.status==202 ? 2 : 1; if(response.status==202 || response.status==200) { layer.msg(response.message,{icon:icon}); $("button[type=submit]").html('登录').attr('disabled',false); if(response.url!='') { window.location.href=response.url; } //$("#login").resetForm(); 清空form表单值 } }, error:function (data) { layer.msg('网络错误!',{icon:2}); $("button[type=submit]").html('登录').attr('disabled',false); } }); } });