vue&element-ui搭配使用rules表单校验规则
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
验证手机号&邮箱的写法
data() {
var checkPhone = (rule, value, callback) => {
const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
if (!value) {
return callback(new Error('手机号不能为空'))
}
setTimeout(() => {
// Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
// 所以我就在前面加了一个+实现隐式转换
if (!Number.isInteger(+value)) {
callback(new Error('请输入数字值'))
} else {
if (phoneReg.test(value)) {
callback()
} else {
callback(new Error('手机号格式不正确'))
}
}
}, 100)
};
var checkEmail = (rule, value, callback) => {
const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
if (!value) {
return callback(new Error('邮箱不能为空'))
}
setTimeout(() => {
if (mailReg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的邮箱格式'))
}
}, 100)
};
return {
rules: {
sex: [{
required: true,
message: '请选择',
trigger: 'blur'
}],
telephone: [{
required: true,
message: '请输入',
trigger: 'blur'
},{
validator: checkPhone,
trigger: 'blur'
}],
userName: [{
required: true,
message: '请输入',
trigger: 'blur'
}],
email: [{
required: true,
message: '请输入',
trigger: 'blur'
},{
validator: checkEmail,
trigger: 'blur'
}],
status: [{
required: true,
message: '请选择',
trigger: 'blur'
}]
},
}
},
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)