element-UI中el-form带有检验功能,用法如下:
<template>
<div>
<el-form size="small" ref="userform" :rules="rulesForm" :model="form">
<el-form-item label="用户名" prop="userName">
<el-input v-model.trim="form.userName" :disabled="addUserDialogTitle == '编辑用户'"></el-input>
</el-form-item>
<el-form-item label="联系方式" prop="phone">
<el-input v-model.number="form.phone"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { checkSpecialKey,validateInputPhone } from '@/api/check'
export default {
name: 'userList',
data () {
let validateInputSpecialKey = (rule, value, callback) => {
if (!checkSpecialKey(value)) {
callback(new Error("不能含有特殊字符!!"));
} else {
callback();
}
};
let validateInputPhone = (rule, value, callback) => {
if (!checkPhone(value)) {
callback(new Error("请正确输入联系方式!!"));
} else {
callback();
}
};
return {
form:{},
rulesForm: {//弹窗输入框检验
userName: [
{ required: true,message: "请输入用户名",trigger: "blur"},
{ min: 3,max: 10,message: "长度在 3 - 10 字符" },
{ validator: validateInputSpecialKey, trigger: "blur" }
],
phone:[
{ required: true,message: "请输入联系方式",trigger: "blur"},
{ validator: validateInputPhone, trigger: "blur" }
]
}
}
},
methods:{
//提交表单
onSubmit(){
this.$refs['userform'].validate((valid) => {
if (valid) {
//TODO 调用接口提交数据
}else{
return false
}
})
}
}
}
</script>
校验方法有:
校验是否包含特殊字符
export function checkSpecialKey(str) {
let specialKey =
"[`~!#$^&*()=|{}':;'\\[\\].<>/?~!#¥……&*()——|{}【】‘;:”“'。,、?]‘'";
for (let i = 0; i < str.length; i++) {
if (specialKey.indexOf(str.substr(i, 1)) != -1) {
return false;
}
}
return true;
}
校验是否包含特殊字符(路径专用)
export function checkSpecialKeyPath(str) {
let specialKey =
"[`~!#$^&*()=|{}';'<>?~!#¥……&*()——|{}【】‘;”“'。,、?]‘'";
for (let i = 0; i < str.length; i++) {
if (specialKey.indexOf(str.substr(i, 1)) != -1) {
return false;
}
}
return true;
}
校验是否包含中文
export function checkChinese(val) {
// 正则匹配非中英文及数字的字符
let reg = /[\u4e00-\u9fa5]/;
let n = reg.test(val);
if ( n ) {
return false
}
return true
}
校验是否手机号码或者固话
export function checkPhone(val) {
let reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;
let n = reg.test(val);
if ( !n ) {
return false
}
return true
}
校验密码是否合格
export function checkPassword(val) {
let reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/;
let n = reg.test(val);
if ( !n ) {
return false
}
return true
}
校验非负浮点数
export function checkNumberNotNegative(val) {
let reg = /^\d+(\.\d+)?$/;
let n = reg.test(val);
if ( !n ) {
return false
}
return true
}