element UI,输入框失去焦点的时候提示
参考此篇博客Vue.js验证表单不能包含中文,只可以数字+字母
<el-form
ref="ruleForm"
:rules="rules"
:model="addEditForm"
label-width="80px"
>
<el-form-item
label="角色名称"
prop="roleName"
>
<el-input
v-model.trim="addEditForm.roleName"
placeholder="填写角色名称"
style="width:250px"
maxlength="100"
show-word-limit
/>
</el-form-item>
</el-form>
<script>
data() {
return {
addEditForm: {
roleName: ''
},
rules: {
roleName: [
{
required: true, message: '请输入角色名称', trigger: 'blur' },
{
pattern: /^[^\u4e00-\u9fa5]+$/, message: '不允许输入中文', trigger: 'blur' },
{
pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号', trigger: 'blur' },
{
pattern: /[0-9a-zA-Z]{1,6}/, message: '只可以输入数字和字母', trigger: 'blur' },
{
pattern: /^[1-9]*$/, message: '请输入正整数', trigger: 'blur' }, // 可以输入多位正整数
{
pattern: /^[1-9]d*$/, message: '请输入正整数', trigger: 'blur' }// 只能输入一位正整数
]
}
}
}
</script>