element-ui中对输入框进行验证-爱代码爱编程
可以使用正则表达式对输入框进行验证,确保输入的日期格式正确且不包含0开头的月和日。下面是一个示例的正则表达式:
new RegExp("^(\\d\\d\\d\\d)(?:\\.(\\d\\d)(?:\\.(\\d\\d))?)?$").test(dateString) |
这个正则表达式可以匹配以下格式的日期:
- "YYYY": 如: 1998
- "YYYY.MM": 如: 1998.01 或者 1998.12
- "YYYY.MM.DD": 如: 1998.01.01 或者 1998.12.13
- "YYYY": 检查字符串是否以 4 个数字开头,不是 0 开头。
- ".": 检查字符串是否以 "." 结尾。
- ".": 检查字符串是否以 "." 结尾。
在 element-ui 中,你可以使用 el-form
、el-input
和 el-form-item
等组件来实现输入框的验证。在 el-form-item
中设置 prop
属性为 'birthday'
,然后使用 rules
属性来指定验证规则,如下所示:
<el-form ref="form" :model="form" :rules="rules"> | |
<el-form-item label="生日" prop="birthday"> | |
<el-input v-model="form.birthday"></el-input> | |
</el-form-item> | |
</el-form> |
data() { | |
return { | |
form: { | |
birthday: '' | |
}, | |
rules: { | |
birthday: [ | |
{ required: true, message: '请选择生日', trigger: 'blur' }, | |
{ type: 'regExp', regex: /^(\d\d\d\d)(?:\.(\d\d)(?:\.(\d\d))?)?$/, message: '请按照 YYYY 或 YYYY.MM 或 YYYY.MM.DD 的格式输入' } | |
] | |
} | |
} | |
} |
其中 required: true
表示必填项,"message" 属性定义了验证失败时的错误提示信息,"trigger" 属性定义了何时触发验证。