如题所示,由于项目需要,将验证规则不以之前的方式写死在代码中,而是从外面读取进来,便于控制修改,能做到一改全改。想想如果某个验证规则出了问题,而我们在多个组件中都用到了该验证规则,那岂不是要到每个组件中去修改。故立即推=>
虽然简单,但实现过程中还是出现了各种问题。好吧,最开始新建一个testRules.json文件:
//testRulses.json
{
"ip":{
"testrule":"/^(\sd|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/",
"messageError": "请正确输入ip地址",
"messageEmpty": "不能为空"
},
"netmask":{
"testrule":"/^(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(254|252|248|240|224|192|128|0)$/",
"messageEmpty":"请正确输入子网掩码",
"messageEmpty": "不能为空"
},
"bw":{
"testrule":"",
"messageEmpty":"不能为空"
}
}
接着在组件中引入
import testRules from '../../testRules.json' //最初错误写法import {testRules} from '../../testRules.json'
注:引入import组件或者文件时,{}一般表明引入(或导入)模块中特定的块。例如那种错误的写法会无任务是从testRules中读取特定的testRules块或者方法!!所以,如果我们想要引入其中的部分块时,可以加{},正如按需引入API中的方法时,我们常常是通过import {getX1,getX2…} from ‘xxx’。正确的方法是不加{},而可以直接import的原因,又是因为组件中一般都有export default。但是这里的json文件是什么原因??我还没有来得及仔细看
接着,在组件中的使用和原来的一样。直接在组件中使用(使用eval()方法不知道有没有什么后遗症呀- -):
var validateBw = (rule,value,callback)=>{
var exp = eval(testRules.bw.testrule); //这里需要通过eval()将原本的json对象验证属性testrule的value字符串形式转换为可执行的正则表达式object形式!!
if(value ==""){
callback(new Error(testRules.bw.messageEmpty));
}
if(exp.test(value) === false){
callback(new Error(testRules.bw.messageError));
}
else{
callback();
}
};
///////////////////////////////////////////////////////////////////////////////////
rulesRxform:{
bw:[{required:true,validator:validateBw,trigger:'blur'}]
}
上面一开始没有使用eval进行所谓的转换,然后发现一直没有效果,打印出来,如下面所示,明显看到直接通过json取到的testrules是一个字符串,因此在使用它进行正则匹配会报错!当然就需要转换后再使用了。
以为,这样子已经准确无误了,直接编译查看验证效果。然而,json文件报错!
这里还有另一个注意点,json文件中需要对一些特殊字符进行转义,json中需要转义的字符有:“/ \ b f n r t”。 因此修改json文件如下:
{
"ip":{
//对正则表达式中涉及到的“/”“\ ”进行转义!!
"testrule":"\/^(\\sd|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.(\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.(\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.(\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])$\/",
"messageError": "请正确输入ip地址",
"messageEmpty": "不能为空"
},
"netmask":{
"testrule":"\/^(254|252|248|240|224|192|128|0)\\.0\\.0\\.0|255\\.(254|252|248|240|224|192|128|0)\\.0\\.0|255\\.255\\.(254|252|248|240|224|192|128|0)\\.0|255\\.255\\.255\\.(254|252|248|240|224|192|128|0)$\/",
"messageEmpty":"请正确输入子网掩码",
"messageEmpty": "不能为空"
},
"bw":{
"testrule":"",
"messageEmpty":"不能为空"
}
}
这下子就正确了,初步写了简单的验证,后续大概的项目就大概这样实现了。
补充:再小小补充一点,Json字符串和Json对象的区别。一个是字符串当然就有“”了。正如本项目中的json文件中,内容是以json数据形式的对象的形式存在的(最开始傻傻的我还用了JSNO.parse妄想进行转换,天真!)。