表单正则(主要是备注的提示)
element-ui上的备注不能进行正则提示,可以用这种方法
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-suffix=":">
<el-form-item label="名称" prop="ruleCode">
<el-input v-model="form.ruleCode" placeholder="请输入名称" :disabled="ruleCodeDisabled" />
</el-form-item>
<el-form-item label="序号" prop="ruleName">
<el-input v-model="form.ruleName" placeholder="请输入序号" />
</el-form-item>
<el-form-item label="数值" prop="ruleValue">
<el-input v-model="form.ruleValue" placeholder="请输入数值" />
</el-form-item>
<el-form-item label="备注" class="ellipsis-1" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入规则备注" maxlength="250"/>
<span style="float:right;color:#999;">{{remnant}}/250</span>
</el-form-item>
</el-form>
data(){
return {
form:{
name:undefined,
sort:undefined,
value:undefined,
remark:undefined
},
rules: {
ruleName: [
{ required: true, message: '规则名称不能为空', trigger: 'blur' },
{ pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]{4,6}$/, message: "请输入4~6位中文、英文、数字或者下划线", trigger: 'blur'}
],
ruleCode: [{ required: true, message: '规则编码不能为空', trigger: 'blur' },
{ pattern: /^\d{4,6}$/, message: "请输入4~6位数字", trigger: 'blur'}
],
ruleValue: [{ required: true, message: '规则顺序不能为空', trigger: 'blur' },
{ pattern: /^\d{1,200}$/, message: "请输入1~64位数字", trigger: 'blur'}],
//在写规则这里不能像其他表单正则一样,像我下面注释掉这几行就是千万不能写的,应该写成计算属性
// remark: [
// { required: false, message: '规则顺序不能为空', trigger: 'blur' },
// { pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]{1,3}$/, message: "内容长度不能超过500", trigger: 'blur'}
// ],
},
}
}
computed: {
// 备注最大输入文字数量
remnant() {
return this.form.remark ? 250 - this.form.remark.length : 250;
},
},
最终如右图所示:备注显示总字数,输入字数超过总字数,不能键如
注:这里的正则参考了另一个博主的,如需要更多的正则表达式请移步至:https://blog.csdn.net/qq_21423689/article/details/79005203,或者vscode下载any-rule插件,如下图:
如有侵权请及时告知 !!!