//数据类型 var validatedatatypes = {}; //验证指定 vue.directive('validate', { bind: function (el, binding, vnode) { var vue = vnode.context; var validateformitems = vue.validateformitems; if (validateformitems == undefined) { validateformitems = []; vue.validateformitems = validateformitems; } var config = binding.value; var index = validateformitems.length; el.setattribute("validate-index", index) config.validateindex = index;//添加序号 config.el = el; validateformitems.push(config); }, update: function (el, binding, vnode) { var vue = vnode.context; var validateformitems = vue.validateformitems; var index = el.getattribute("validate-index") var oldconfig = validateformitems[index]; var config = binding.value; var data = config.data; var olddata = oldconfig.data; if (json.stringify(data) != json.stringify(olddata) || json.stringify(config.ignore) != json.stringify(oldconfig.ignore) || json.stringify(config.compare) != json.stringify(oldconfig.compare)) { config.el = el; config.validateindex = index;//添加序号 vue.validateformitems[index] = config; //更新值 var validateformconfig = vue.validateformconfig; if (validateformconfig != undefined) { vue.validateform(validateformconfig, index);//改变后同时触发验证 } } } }); //vue全局验证 vue.mixin({ methods: { //验证 validateform: function (thisoptions, validateindex) { var vue = this; var defaultoptions = { showallerror: true, datatypes: {},//这里声明的是局部数据类型,也可以通过全局validatedatatypes在外部声明 tipsstyle:1, //0,:alert, 1:msg 2,表单前后 ,3:all errorclass: "validate-error", tipserroraddclass: "validate-tips-error", alltipsboxtarget: ".validate-all-tips-box", beforecheck: null, beforesubmit: null }; var defaultoptions = extend({}, defaultoptions, thisoptions); vue.validateformconfig = defaultoptions; var showallerror = defaultoptions.showallerror; var datatypes = defaultoptions.datatypes; var tipsstyle = defaultoptions.tipsstyle; if (tipsstyle != 2) { showallerror = false; } var beforecheck = defaultoptions.beforecheck; var beforesubmit = defaultoptions.beforesubmit; var errorclass = defaultoptions.errorclass; //验证出错后表单添加的样式 var tipserrorclass = defaultoptions.tipserroraddclass; //错误提示添加的样式,tipsstyle为2时有效 var alltipsboxtarget = defaultoptions.alltipsboxtarget; //form第一行或最后一行提示信息的ul样式,tipsstyle为3时有效 var validateformitems = vue.validateformitems; if (validateformitems == undefined) { return true; } //开始验证 var startvalidate = function () { var canexecute = true; if (typeof (beforecheck) == "string") { if (beforecheck != "") { canexecute = eval(beforeexecute); } } else if (typeof (beforecheck) == "function") { canexecute = beforecheck(); } if (typeof canexecute != "boolean") { canexecute = true; } var validaresult; if (canexecute) { validaresult = validating(); //开始遍历验证 } else { return false; } if (!validaresult) { return false; } if (typeof (beforesubmit) == "string") { if (beforesubmit != "") { canexecute = eval(beforesubmit); } } else if (typeof (beforesubmit) == "function") { canexecute = beforesubmit(); } if (typeof canexecute != "boolean") { canexecute = true; } return canexecute; }; //遍历所有数据,进行验证 var validating = function () { var errorindex = 0; //获取到错误的序号 var validateresult = true; var $alltipsboxtarget = null; if (alltipsboxtarget) { document.queryselector(alltipsboxtarget); } if ($alltipsboxtarget != null) { $alltipsboxtarget.innerhtml = ""; } for (var i = 0; i < validateformitems.length; i++) { var validateconfig = validateformitems[i]; var result = validateitem(validateconfig, errorindex); if (!result) { errorindex++; validateresult = validateresult && result; } if (!showallerror) { if (result == false) { return false; //如果不需要显示所有错误信息,则加return false跳出each循环 } } } return validateresult; }; var validateitem = function (validateconfig, errorindex) { var defaultconfig = { datatype: "*", focustarget: "", tipstarget: "", regexp: "", minlength: 0, nullmsg: "值不能为空!", errormsg: "填写错误!", minlengtherrormsg: "最少输入个{0}字符!", ignore: false, ignoreempty: false, compare: null, checkurl: "", checkdata: null, checkerror: "", additionals: "", execute: null }; validateconfig = extend(defaultconfig, validateconfig); var $el =validateconfig.el; var validatetarget = validateconfig.validatetarget; var ignore = validateconfig.ignore; var focustarget = validateconfig.focustarget; var $focustarget = null; if (focustarget) { $focustarget = document.queryselector(focustarget); } else { $focustarget = $el.queryselector(".el-input__inner"); } if (ignore) { return true;//继续下一个循环 } var result = validatedatatype(validateconfig); if ($focustarget != null) { if (showallerror) { if (errorindex == 0) { if (result) { $focustarget.classlist.remove(errorclass); } else { $focustarget.focus(); $focustarget.classlist.add(errorclass); } } } else { if (result) { $focustarget.classlist.remove(errorclass); } else { $focustarget.focus(); $focustarget.classlist.add(errorclass); } } } return result; }; //验证数据类型,在validating中调用,表单的的input和 propertychange事件会同时触发 var validatedatatype = function (validateconfig) { var datatype = validateconfig.datatype.trim(); var regexpstr = validateconfig.regexp; var minlength = validateconfig.minlength; var minlengtherrormsg = validateconfig.minlengtherrormsg; var nullmsg = validateconfig.nullmsg; var errormsg = validateconfig.errormsg; var ignoreempty = validateconfig.ignoreempty; var compare = validateconfig.compare; var checkurl = validateconfig.checkurl; var checkerror = validateconfig.checkerror; var checkadditionals = validateconfig.additionals; var tipstarget = validateconfig.tipstarget; //表单提示信息的span容器样式,没有定义则动态添加,tipsstyle为2时有效 var validatetarget = validateconfig.validatetarget; var execute = validateconfig.execute; var result = false; var gets = validateconfig.data; var resulttype; if (gets == null) { gets = ""; } var nomorevalidate = false;//表示是否继续后面的验证,对表单对比,远程ajax if (!validateconfig.hasownproperty("data")) { nomorevalidate = true; result = true; } if (!nomorevalidate) { if (gets == "" && ignoreempty == true) //先进行非空忽略验证 { nomorevalidate = true; result = true; } } //接下来进行最小长度验证 if (!nomorevalidate) { if (minlength > 0) { if (gets.tostring().length == 0) { result = nullmsg; } else if (gets.tostring().length < minlength) { result = minlengtherrormsg.replace("{0}", minlength); } else { result = true; } resulttype = typeof (result); if (resulttype != "boolean") { nomorevalidate = true; } else if (!result) { nomorevalidate = true; } } } //然后再进行数据类型验证 if (!nomorevalidate) { if (regexpstr != "")//有正则优先用正则匹配 { var reg = new regexp(regexpstr); result = reg.test(gets); } else { switch (datatype) { case "": case "*": result = validatedatatypes.defaultdatatype(gets, validateconfig); break; default: var datatypefun = datatypes[datatype]; //先检测datatypes内部是否有定义,也可以用datatypes.hasownproperty(datatype)判断 if (datatypefun == undefined) //如果找不到则到validatedatatypes中去找 { datatypefun = validatedatatypes[datatype]; } if (typeof (datatypefun) != "function") { alert(datatype + "数据类型未定义"); return false; } else { result = datatypefun(gets, validateconfig);//只能返回字符串,true或flase,字符串默认为false; if (typeof (result) == "string") { errormsg = result; result = false; } } break; } } } resulttype = typeof (result); if (resulttype != "boolean") { nomorevalidate = true; } else if (!result) { nomorevalidate = true; } ///然后再进行比较验证 if (!nomorevalidate) { if (compare != null)//和其他值对别 { if (gets != compare) { result = errormsg; } } } resulttype = typeof (result); if (resulttype != "boolean") { nomorevalidate = true; } else if (!result) { nomorevalidate = true; } //进行execute验证 if (!nomorevalidate) { if (typeof (execute) == "string") { if (execute != "") { result = eval(execute); } } else if (typeof (execute) == "function") { result = execute(validateconfig); } } resulttype = typeof (result); if (resulttype != "boolean") { nomorevalidate = true; } else if (!result) { nomorevalidate = true; } //进行远程验证 if (!nomorevalidate) { if (checkurl != "" && gets != "")//远程验证 { var serverdata = { data: gets }; var checkresult = ajax({ type: "post", url: checkurl, data: serverdata, async: false });//同步方法 checkresult = jsonparse(checkresult); if (checkresult.state == 1) { } else if (checkresult.state == 0) { if (checkerror != "") { result = checkerror; } else { result = checkresult.msg; } } else { result = checkresult.msg; } } } resulttype = typeof (result); //每次验证后都需要重新获取 if (resulttype == "boolean") { } else if (resulttype == "string") //返回字符串则表示不成功 { nullmsg = errormsg = result; result = false; } else { result = false; nullmsg = errormsg = "填写错误(数据类型必须返回bool或字符串)!"; } showtips(result, gets, nullmsg, errormsg, validateconfig); return result; }; //显示提示信息 var showtips = function (result, gets, nullmsg, errormsg, validateconfig) { var tipsmsg = ""; if (gets.tostring() == "") { tipsmsg = nullmsg; } else { tipsmsg = errormsg } switch (tipsstyle.tostring()) { case "1": tipsstyle1(result, tipsmsg, validateconfig); //依赖layer.js break; case "2": //html显示 tipsstyle2(result, tipsmsg, validateconfig); break; case "3": // tipsstyle3(result, tipsmsg, validateconfig); break; default: defaulttipsstyle(result, tipsmsg, validateconfig); break; } }; //默认风格,采用alert var defaulttipsstyle = function (result, tipsmsg, validateconfig) { if (result) { return; } console.log(validateconfig.el); alert(tipsmsg); }; var tipsstyle1 = function (result, tipsmsg, validateconfig) { if (result) { return; } console.log(validateconfig.el); vue.$message({ message: tipsmsg, type: "warning", showclose: true}); }; //容器内部显示 var tipsstyle2 = function (result, tipsmsg, validateconfig) { var tipstarget = validateconfig.tipstarget; var $item = validateconfig.el; var $tipbox = null; if (tipstarget) { $tipbox = document.queryselector(tipstarget); } if ($tipbox!=null) { var defaulttext = $tipbox.getattribute("data-default-text"); if (defaulttext == undefined) { defaulttext = $tipbox.innerhtml; $tipbox.setattribute("data-default-text",defaulttext); } if (result) { $tipbox.innerhtml = defaulttext $tipbox.classlist.remove(tipserrorclass); } else { $tipbox.innerhtml = tipsmsg; $tipbox.classlist.add(tipserrorclass); } showallerror = true; } else { if (!result) { console.log(validateconfig.el); ui.msg({ content: tipsmsg, type: "warning" }); showallerror = false; } } }; //顶部显示 var tipsstyle3 = function (result, tipsmsg) { var $tipsbox = document.queryselector(alltipsboxtarget); if ($tipsbox!=null) { if (result) { $tipsbox.innerhtml=""; //避免页面跳动 return; } console.log(validateconfig.el); $tipsbox.innerhtml =tipsmsg; } }; if (validateindex == undefined) { return startvalidate(); } else { if (tipsstyle == 2) { return validateitem(validateformitems[validateindex], 0); //弹出提示不需要单个验证! } } }, } }) //默认验证 validatedatatypes.defaultdatatype = function (gets, itemconfig) { if (array.isarray(gets)) { if (gets.length == 0) { gets = ""; } } if (gets == null || gets == undefined) { return false; } if (gets.tostring().trim() == "") { return false; } return true; } //匹配字符串 validatedatatypes.string = function (gets, itemconfig) { if (isstr(gets)) { return true } else { return false; } } //匹配数值型,默认最小值是0,默认最大值是2147483647,支持小数 validatedatatypes.numeric = function (gets, itemconfig) { var defaultoptions = { max: 2147483647, min: 0 }; defaultoptions = extend({}, defaultoptions, itemconfig); var max = defaultoptions.max; var min = defaultoptions.min; if (!isnumeric(gets)) { return false } gets = parsefloat(gets); if (gets > max) { return false; } else if (gets < min) { return false; } return true; } //匹配货币类型 validatedatatypes.money = function (gets, itemconfig) { var reg = /^([\u0024\u00a2\u00a3\u00a4\u20ac\u00a5\u20b1\20b9\uffe5]\s*)(\d+,?)+\.?\d*\s*$/; return reg.test(gets) } //匹配中文 validatedatatypes.chinese = function (gets, itemconfig) { var reg = /^[\u4e00-\u9fa5]+$/; return reg.test(gets) } validatedatatypes.email = function (gets, itemconfig) { if (isemail(gets)) { return true; } else { return false; } } validatedatatypes.mobile = function (gets, itemconfig) { if (ismobile(gets)) { return true; } else { return false; } } validatedatatypes.editor = function (gets, itemconfig) { var editorid = itemconfig.el.getattribute("name"); if (gets == "") { if (editorid != null) { var editorobj = ue.geteditor(editorid); editorobj.focus(true); } return false; } else { return true; } } validatedatatypes.username = function (gets, itemconfig) { if (isnumeric(gets)) { return "用户名不能为纯数字字符!"; } if (isusername(gets)) { return true; } else { return "用户名只能由2-15位中文,数字和下划线组成!"; } } validatedatatypes.password = function (gets, itemconfig) { var len = gets.length; if (len == 0) { return false; } else if (len < 6) { return "密码最少由6个字符组成!"; } return true; } validatedatatypes.datetime = function (gets, itemconfig) { if (isdatetime(gets)) { return true; } else { return false; } } validatedatatypes.date = function (gets, itemconfig) { if (isdate(gets)) { return true; } else { return false; } } validatedatatypes.file = function (gets, itemconfig) { if (gets.indexof(".") > 0 && gets.length >= 4 && gets.indexof(".") < (gets.length - 1)) { return true; } else { return false } } //匹配身份证 validatedatatypes.idcard = function (gets, itemconfig) { var wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1];// 加权因子; var validecode = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2];// 身份证验证位值,10代表x; if (gets.length == 15) { return isvaliditybrithby15idcard(gets); } else if (gets.length == 18) { var a_idcard = gets.split("");// 得到身份证数组 if (isvaliditybrithby18idcard(gets) && istruevalidatecodeby18idcard(a_idcard)) { return true; } return false; } return false; function istruevalidatecodeby18idcard(a_idcard) { var sum = 0; // 声明加权求和变量 if (a_idcard[17].tolowercase() == 'x') { a_idcard[17] = 10;// 将最后位为x的验证码替换为10方便后续操作 } for (var i = 0; i < 17; i++) { sum += wi[i] * a_idcard[i];// 加权求和 } valcodeposition = sum % 11;// 得到验证码所位置 if (a_idcard[17] == validecode[valcodeposition]) { return true; } return false; } function isvaliditybrithby18idcard(idcard18) { var year = idcard18.substring(6, 10); var month = idcard18.substring(10, 12); var day = idcard18.substring(12, 14); var temp_date = new date(year, parsefloat(month) - 1, parsefloat(day)); // 这里用getfullyear()获取年份,避免千年虫问题 if (temp_date.getfullyear() != parsefloat(year) || temp_date.getmonth() != parsefloat(month) - 1 || temp_date.getdate() != parsefloat(day)) { return false; } return true; } function isvaliditybrithby15idcard(idcard15) { var year = idcard15.substring(6, 8); var month = idcard15.substring(8, 10); var day = idcard15.substring(10, 12); var temp_date = new date(year, parsefloat(month) - 1, parsefloat(day)); // 对于老身份证中的你年龄则不需考虑千年虫问题而使用getyear()方法 if (temp_date.getyear() != parsefloat(year) || temp_date.getmonth() != parsefloat(month) - 1 || temp_date.getdate() != parsefloat(day)) { return false; } return true; } } validatedatatypes.table = function (gets, itemconfig) { gets = gets.tostring().trim(); if (islstr(gets)) { return checkkey(gets); } else { return "表名只能由字母,数字和下划线组成,而且首字母必须是英文!"; } } validatedatatypes.field = function (gets, itemconfig) { gets = gets.tostring().trim(); if (islstr(gets)) { return checkkey(gets); } else { return "字段只能由字母,数字组成,而且首字母必须是英文!"; } } function checkkey(str) { str = str.tolowercase(); var keys = new array("in","as","currentpage","page", "pagesize", "order", "sa", "dbo", "system", "index", "by", "select", "from","table","table_", "field_", "top", "asc", "desc", "count", "sum", "link", "update", "insert", "to", "values", "where", "delete", "join", "charge", "guid", "id"); if (keys.contains(str)) { return "对不起," + str + "为表名或字段名的屏蔽词,请重写设置!" } else { return true; } }