/** * Created by 周前梅 主要用于用户表单校验逻辑 显示on 2017/12/9. */ $(function(){ // 手机号码验证 jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/; return this.optional(element) || (length == 11 && mobile.test(value)); }, "请正确填写您的手机号码"); // 邮箱验证规则 jQuery.validator.addMethod("isEmail", function(value, element) { var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; return this.optional(element) || (reg.test(value)); }, "请正确填写您的邮箱"); // 下拉框的验证 jQuery.validator.addMethod("isSelect", function(value, element) { return this.optional(element)|| (value!=-1); }, "请选择"); }); //校验用户表单逻辑 function checkUserForm(id,operate){ validator = $("#editUserForm").validate({ // onfocusout: false, //失去焦点 onkeyup: false, // 键盘是否按下 //onclick: false, //是否单击 rules: { userName: { required: true, //异步验证 开始 remote: { url: ctx + "/sys/manager/authc_json/checkRepeatUserName.shtml",//发送请求的url地址 type: "post", //请求方式 async:false, dataType: "json",//接收的数据类型 cache:false, data: { userName: function () { return $("#editUserForm #userName").val(); }, userID:id?id:0, operate:operate }, dataFilter: function (data, type) { //过滤返回结果 if(data == "true"){ return true; //true代表用户名称还未存在 }else{ return false; //false代表用户名称已经存在 } } } //异步验证 结束 }, roleID:{ required:true, isSelect:true }, realname:{ required: true }, phone:{ required:true, isMobile:true }, email:{ isEmail:true } }, messages: { userName: { required: "请填写您的账号", remote:"录入的账号名称重复,请重新输入" }, realname:{ required: "请填写您的真实姓名" }, roleID:{ required:"请选择关联角色", isSelect:"请选择关联角色" }, phone:{ required:"请填写您的手机号码", isMobile:'手机号码格式不正确' }, email:{ isEmail:'邮箱格式不正确' } } }); }
/** * Created by 周前梅 扩展插件 错误提示用layer 显示on 2017/12/9. */ (function ($) { "use strict"; $.fn.extend($.validator.defaults, { //重写showErrors showErrors: function (errorMap, errorList) { $.each(errorList, function (i, v) { //在此处用了layer的方法,显示效果更美观 if($(v.element)[0].tagName.indexOf("SELECT")>-1){ // 针对于select2 控件做了调整 layer.tips(v.message, $(v.element).next(), {icon: 2 , time: 2000 }); }else{ layer.tips(v.message, v.element, {icon: 2 , time: 2000 }); } return false; }); } }); })(jQuery);-------------大家可以尝试下