vue之el-form表单校验以及常用正则详解
作者：苜可
这篇文章主要介绍了vue之el-form表单校验以及常用正则，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
el-form表单校验以及常用正则
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="表单字段" prop="str">
<el-input v-model="ruleForm.str"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
const checkFinanceCode = (rule, value, callback) => {
if (value) {
var reg = /^[A-Za-z0-9_]+$/
if (reg.test(value) === false) {
callback(new Error('只可输入英文数字和下划线'))
} else {
callback()
}
} else {
callback()
}
}
return {
ruleForm: {
str: '',
},
rules: {
str: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }, // 限制必填
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }, // 限制字符串长度
{ required: true, trigger: 'blur', validator: checkFinanceCode } // 自定义正则
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>下面记录一下常用正则，大家发现错误，或者有更好的评论区提出来，我一并添加修改，方便大家下次直接用
// 数字类型
数字：/^[0-9]*$/
n位的数字：/^\d{n}$/
至少n位的数字：/^\d{n,}$/
m-n位的数字：/^\d{m,n}$/
价格：/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
零和非零开头的数字：/^(0|[1-9][0-9]*)$/
非零开头的最多带两位小数的数字：/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/
带1-2位小数的正数或负数：/^(\-)?\d+(\.\d{1,2})$/
正数、负数、和小数：/^(\-|\+)?\d+(\.\d+)?$/
有两位小数的正实数：/^[0-9]+(\.[0-9]{2})?$/
有1~3位小数的正实数：/^[0-9]+(\.[0-9]{1,3})?$/
非零的正整数：/^[1-9]\d*$/ 或 /^([1-9][0-9]*){1,3}$/ 或 /^\+?[1-9][0-9]*$/
非零的负整数：/^\-[1-9][]0-9"*$/ 或 /^-[1-9]\d*$/
非负整数：/^\d+$/ 或 /^[1-9]\d*|0$/
非正整数：/^-[1-9]\d*|0$/ 或 /^((-\d+)|(0+))$/
非负浮点数：/^\d+(\.\d+)?$/ 或 /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$/
非正浮点数：/^((-\d+(\.\d+)?)|(0+(\.0+)?))$/ 或 /^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$/
正浮点数：/^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/ 或 /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/
负浮点数：/^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$/ 或 /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/
浮点数：/^(-?\d+)(\.\d+)?$/ 或 /^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$/
// 其他特殊校验
4~20位英文+数字: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,20}$/
大写英文: /^[A-Z]+$/
邮箱: /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+)$/ 或 /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
手机: /^1[3456789]\d{9}$/ 或 /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
只能汉字: /^[\u4e00-\u9fa5]{0,}$/
电话号码: ("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：/^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$/
强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)：/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$/
强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)：/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/el-form前端表单校验步骤
(1)，Form组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可。
<el-form :model="formData" :rules="rules" ref="form"> <el-form-item label="活动名称" prop="name"> <el-input v-model="formData.name" /> </el-form-item> </el-form> <el-button @click="submit">提交</el-button>
(2)，data->return里面加上formData,在这里写上限定条件，通过rules属性传入约定的验证规则
<script>
export default {
return {
name:''
},
const nameValidator = (rule,value,callback)=>{ 校验内容 },
rules:{
name:[
{ required: true(不填的时候提示不能为空), message: '请输入活动名称', trigger: 'blur'(失去焦点的时候触发) },
// 第一条验证复合要求时，才会执行第二条
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
// 第二条验证复合要求时，才会执行第三条
{ validator: nameValidator(限定条件), trigger:'blur' }
]
}
}
</script>(3)，提交验证
methods:{
submit(){
this.$refs.form.validate(pass => {
if(!pass) return;
需要执行的代码
})
}
}例子
// 如果设备名称是铅笔，设备分类就为行政办公设备
<template>
<el-form :model="formData" :rules="rules" ref="form">
<el-form-item label="活动名称" prop="name">
<el-input v-model="formData.name" />
</el-form-item>
<el-form-item label="设备分类" prop="category">
<el-select v-model="formData.category" placeholder="请选择">
<el-option v-for="d in $store.state.categoryList" :key="d.id" :label="d.name" :value="d.id" ></el-option>
</el-select>
</el-form-item>
</el-form>
<el-button type="primary" @click="submit">提交</el-button>
</template>
<script>
export default {
data(){
// 获取的数据是从vuex中获取的
const nameValidator = (rule,value,callback)=>{
// 只判断铅笔是办公用品，只是例子
const { category } = this.formData;
const cName = this.$store.getters.categoryObj[category].name;
if(value === '铅笔' && category && category !== 'CATE9'){
callback(new Error(`铅笔不属于${cName}`))
}else{
callback();
}
},
const categoryValidator = (rule,value,callback) => {
// 调用别的表单项的校验
this.$refs.form.validateField('name');
callback();
},
return {
formData:{
name:'',
}
},
rules:{
name:[
{ required: true, message: '请输入设备名称', trigger: 'blur' },
{ validator: nameValidator, trigger:'blur' }
],
category:[
{ required: true, message: '请选择设备分类', trigger: 'change' },
{ validator: categoryValidator, trigger:'change' }
]
}
},
methods:{
submit(){
this.$refs.form.validate(pass => {
if(!pass) return;
this.submiting=true;
axios.post('/pre-edit',this.formData).then(res =>{
this.submiting=false;
if(!res.code){
this.$message.success('编辑成功');
this.$router.back();
}
})
})
}
}
}
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。