前端项目开发常见功能实现-表单校验

最新推荐文章于 2024-09-10 09:36:42 发布

薛定谔的量子猫.

最新推荐文章于 2024-09-10 09:36:42 发布

阅读量261

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/Wsnbb007/article/details/128886481

版权

element表单校验的格式:

<el-form 绑定model 和 rules规则

<el-form-item 绑定prop属性

<el-input 绑定v-model

其中 :model='数据' :rules='规则' prop='数据的键' v-model='数据的值'

表单:

<el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
    >
      <el-form-item prop="mobile">
        <el-input
          v-model="loginForm.mobile"
          placeholder="手机号"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          placeholder = "密码"
        />
      </el-form-item>
    </el-form>

数据:

data() {
    return {
      loginForm: {
        mobile: '18811329999',
        password: '123456'
      },
      loginRules: {
        mobile: [
          { required: true, trigger: 'blur', message: '手机号不能为空' }
        ],
        password: [
        { required: true, trigger: 'blur', message: '密码不能为空' }
        ]
      },
    }
  }

常见校验规则:

字符长度

{ min: 6, max: 10, message: '要求6-10个字符', trigger:'blur'}

封装自定义校验函数

{ validator: '校验函数', trigger: 'blur' }

校验手机号:

export function validatePhone(rule, value,callback) {
  const reg =/^[1][3-9][0-9]{9}$/;
  if(value==''||value==undefined||value==null){
    callback();
  }else {
    if ((!reg.test(value)) && value != '') {
      callback(new Error('请输入正确的电话号码'));
    } else {
      callback();
    }
  }
}

校验密码:

export const validatePsdReg = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入密码'))
  }
  if (!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(value)) {
    callback(new Error('请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种'))
  } else {
    callback()
  }
}

校验身份证号:

export function validateIdNo(rule, value,callback) {
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  if(value==''||value==undefined||value==null){
    callback();
  }else {
    if ((!reg.test(value)) && value != '') {
      callback(new Error('请输入正确的身份证号码'));
    } else {
      callback();
    }
  }
}

校验邮箱:

export function validateEMail(rule, value,callback) {
  const reg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
  if(value==''||value==undefined||value==null){
    callback();
  }else{
    if (!reg.test(value)){
      callback(new Error('请输入正确的邮箱'));
    } else {
      callback();
    }
  }
}

校验账号:

export const validateCode = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入账号'))
  }
  if (!/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/.test(value)) {
    callback(new Error('账号必须为6-20位字母和数字组合'))
  } else {
    callback()
  }
}