vue el-form表单校验以及常用正则
vue 表单校验以及常用正则<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"&g
·
vue 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}$/
更多推荐
已为社区贡献1条内容
所有评论(0)