2018-10-24:表单验证(用户名非空,手机号验证,邮箱验证)

看到同期小伙伴写的表单检验,刚好自己没有自己写过,今天也动手自己写写。


页面表单完成后,下面就可以开始进行表单校验啦

data (){
 return{
 ruls:{
 userName:[{validator:checkUserName,trigger:'blur'}],
 email:[{validator:checkEmail,tigger:'blur'}],
 phoneNumber:[{validator:checkOhoneNumber,tigger:'blur'}],
 userRoles:[{required:true,message:"选择用户角色",tigger:"blur"}],
 userMode:[{required:true,message:"选择用户状态",tigger:"blur"}],
 password:[
 {min:6,message:'密码长度最少为6位',tigger:'blur'},
 {validator:checkPassword1,tigger:'blur'}
 ],

 repeatPassword:[
 {min:6,message:'密码长度最少为6位',tigger:'blur'}
 {validator:checkPassword2,tigger:'blur'}
 ],
}
var emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
var phoneReg = /^1[345678]\d{9}$/;
//检查用户名是否为空
var checkUserName = (rule, value, callback) => {
  if (value === '' || value.trim().length <= 0) {
    return callback(new Error('用户名不能为空'));
  } else {
    callback();
  }
};
// 检查email是否为空
var checkEmail = (rule, value, callback) => {
  if (value === '' || value.trim().length <= 0) {
    return callback(new Error('email不能为空'));
  } else if (!emailReg.test(value)) {
    return callback(new Error('email格式不正确'));
  } else {
    callback();
  }
};
// 检查手机号是否为空
var checkPhoneNumber = (rule, value, callback) => {
  if (value === '' || value.trim().length <= 0) {
    return callback(new Error('手机号不能为空'));
  } else if (!phoneReg.test(value)) {
    return callback(new Error('手机号格式不正确'));
  } else {
    callback();
  }
};
//检查输入的密码是否符合格式
var checkPassword1 = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('密码不能为空'));
  } else if (this.userForm.password === this.userForm.userName) {
    return callback(new Error('密码不能和用户名的正序相同'));
  } else {
    callback();
  }
};
//检查再次输入的密码与之前是否一致
var checkPassword2 = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('确认密码不能为空'));
  } else if (value !== this.userForm.password) {
    return callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
};

}

}

正则表达式,亲测有效

var emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;//邮箱
var phoneReg = /^1[345678]\d{9}$/;//电话号码

你可能感兴趣的:(2018-10-24:表单验证(用户名非空,手机号验证,邮箱验证))