element-ui中手机号/中文姓名/英文姓名/密码/邮箱/日期 等简单的验证规则(vue)
验证手机号/中文姓名/英文姓名/密码/邮箱等:data : {// 设置身份证号的验证规则const idCard = (rule, value, callback) => {if (!value) {callback(new Error('请输入身份证号'))} else {const re...
·
验证手机号/中文姓名/英文姓名/密码/邮箱等:
data : {
// 设置身份证号的验证规则
const idCard = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入身份证号'))
} else {
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
if (reg.test(value)) {
callback()
} else {
return callback(new Error('请输入正确的身份证号'))
}
}
}
// 设置手机号的验证规则
const checkPhone = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入联系方式'))
} else {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
if (reg.test(value)) {
callback()
} else {
return callback(new Error('请输入正确的电话'))
}
}
}
// 设置密码的验证规则
const checkPass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'))
} else {
if (this.addForm.checkPass !== '') {
this.$refs.addForm.validateField('checkPass')
}
callback()
}
}
// 设置确认密码的验证规则
const checkPassAgain = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== this.addForm.password) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
// 英名验证
const enName = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入英文名'))
} else {
const reg = /^[a-zA-Z]+$/ // 验证没有空格的英文名
// const reg = /^[a-zA-Z][A-Za-z\s]*[a-zA-Z]*$/ 验证有空格的英文名
if (value.length < 100 && reg.test(value)) {
callback()
} else {
return callback(new Error('请输入正确的英文名'))
}
}
}
// 中名验证
const chnName = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入中文名'))
} else {
const reg = /^[\u4e00-\u9fa5]+$/
if (value.length < 100 && reg.test(value)) {
callback()
} else {
return callback(new Error('请输入正确的中文名'))
}
}
}
return {
// 新增数据规则
addRules: {
// 身份证
credentialNo: [
{ required: true, validator: idCard, trigger: 'blur' }
],
// 密码
password: [
{ required: true, validator: checkPass, trigger: 'blur' },
{ min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
],
// 校验密码
checkPass: [
{ required: true, validator: checkPassAgain, trigger: 'blur' },
{ min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
],
chnName : [
{ required: true, validator: chnName, trigger: 'blur' }
],
enName: [
{ required: true, validator: enName, trigger: 'blur' }
],
phone: [
{ required: true, validator: checkPhone, trigger: 'blur' }
]
},
// 验证邮箱
const validateEmail = (rule, value, callback) => {
if (/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/.test(value) || !value) {
callback()
} else {
callback(new Error('请输入正确邮箱'))
}
}
}
}
对出生日期进行限制(只能选择当天以前的日期)
获取今天日期
let nowDay = new Date().toLocaleDateString().split('/').join('-')
// 将1970/08/08转化成1970-08-08
template中:
<el-date-picker v-model="addForm.birthDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerBeginDateBefore" style="width: 100%"></el-date-picker>
data中:
data(){
return {
// 出生日期限制
pickerBeginDateBefore: {
disabledDate (time) {
return time.getTime() > Date.now() - 8.64e7
//(带 - 8.64e7时,今天之前的日期,不包括今天)
// return time.getTime() > Date.now() - 8.64e7 (今天之后的日期,包括今天)
}
}
}
}
更多推荐
已为社区贡献9条内容
所有评论(0)