vue中将验证表单输入框的方法写在一个js文件中（表达式验证邮箱、身份证、号码、两次输入的密码是否一致）

文章目录

• • 1、实现的效果
  • 2、编写的js文件（这里写在了api文件下）
  • 3、在vue页面中引入（script）
  • 4、页面代码

1、实现的效果

20220606_154646

2、编写的js文件（这里写在了api文件下）

//验证纯数字
let regNumber = /^[0-9]*$/;

//验证身份证
let IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
let IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/;

//验证邮箱
let regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//验证邮箱的正则表达式

export default{

    //验证用户昵称
    checkNickName:(rule, value, callback)=> {
        value = value.replace(/\s*/g, "");//去除空格
        if (!value) {
            return callback(new callback('请输入昵称'))
        }
        if (value.length < 0 || value.length > 10) {
            callback(new Error("昵称的长度范围是0-10，请输入合法的名称！！！"))
        } else if (regNumber.test(value)) {
            callback(new Error("输入的内容不能是纯数字！！！"))
        } else {
            callback()
        }
    },

    //验证用户名
    checkUserName: (rule, value, callback) => {
        value = value.replace(/\s*/g, "");//去除空格
        if (!value) {
            return callback(new callback('请输入用户名'))
        }
        if (value.length < 0 || value.length > 10) {
            callback(new Error("昵称的长度范围是【0-10】"))
        } else if (regNumber.test(value)) {
            callback(new Error("输入的内容不能是纯数字！！！"))
        } else {
            callback()
        }
    },

    //验证用户性别
    checkGender :(rule,value,callback)=>{
        value = value.replace(/\s*/g, "");//去除空格
        if (!value) {
            return callback(new callback('请输入性别'))
        }

        if(value == '男' || value == '女'){
            callback()
        }else{
            callback(new Error("请输入合法的性别"))
        }

    },

    //验证身份证
    checkIdCard : (rule, value, callback) => {
        value = value.replace(/\s*/g, "");//去除空格
        if (!value) {
            return callback(new callback('请输入身份证'))
        }

        // 校验身份证：
        if (IDRe18.test(value) || IDre15.test(value)) {
            callback()
        } else {
            callback(new Error("身份证不合法！！！"))
        }

    },

    //验证邮箱
     checkEmail : (rule, value, callback) => {
         value = value.replace(/\s*/g, "");//去除空格
         if (!value) {
             return callback(new callback('请输入邮箱'))
         }

        if (value.length < 0 || value.length > 15) {
            callback(new Error("邮箱的长度输入有误！！！，合法长度为0-15"))
        } else if (!regEmail.test(value)) {
            callback(new Error("邮箱格式不合法！！！"))
        }else{
            callback()
        }
    },

    //验证手机号
    checkPhone: (rule, value, callback) => {
        value = value.replace(/\s*/g, "");//去除空格
        if (!value) {
            return callback(new callback('请输入箱手机号'))
        }

        if (!regPhone.test(value)) {
            callback(new Error("请输入正确的手机号！！！"))
        } else {
            callback()
        }
    },

    //验证输入的密码
    checkPwd: (rule, value, callback) => {
        value = value.replace(/\s*/g, "");//去除空格
        if (!value) {
            return callback(new callback('请输入密码'))
        }

        if (value.length < 0 || value.length > 8) {
            callback(new Error("密码长度范围 0-8！！！"))
        } else if (regNumber.test(value)){
            callback()
        }else{
            return callback(new callback('输入的密码是整数'))
        }
    }

}

3、在vue页面中引入（script）

<script>
import rules from '@/api/rules.js';
    export default {
      data() {

      //验证第二次输入的密码
      const checkPwdSure = (rule,value,callback)=>{
        const regN = /^[0-9]*$/;

        if(value.length <0 || value.length >8){
          callback(new Error("密码长度范围 0-8！！！"))
        }else if(!regN.test(value)){
            callback(new Error("输入密码不合法，只能是纯数字！！！"))
        }else if(value !== this.UserForm.password){
                 callback(new Error("两次输入的密码不一致，请重新输入！！！"))
        }else{
             callback()
        }

      }

        return {
          UserForm: {
            nickName:'',
            userName: '',
            gender:'',
            IdCard:'',//身份证
            email:'',
            phone:'',
            password: '',
            surepassword:''
          },
          rules: {
            nickName:[
               {required:true,message:'请输入昵称',trigger:'blur'},
               {validator: rules.checkNickName,trigger:['change','blur']}
            ],
            userName: [
              {required: true, message: '请输入姓名', trigger: 'blur'},
              {validator: rules.checkUserName,trigger:['blur','change']}
            ],
            gender: [
              {required: true, message: '请输入性别', trigger: 'blur'},
              {validator: rules.checkGender,trigger:['blur','change']}
            ],
            IdCard: [
              {required: true, message: '请输入身份证号', trigger: 'blur'},
              {validator: rules.checkIdCard,trigger:'blur'}
            ],
            email: [
              {required: true, message: '请输入邮箱', trigger: 'blur'},
              {validator:rules.checkEmail,trigger:'blur'}
            ],
            phone:[
              {required: true, message: '请输入电话号码', trigger: 'blur'},
              {validator: rules.checkPhone, trigger: "blur"}
              // {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur"}
            ],
            password: [
              {required: true, message: '请输入密码', trigger: 'blur'},
              {validator:rules.checkPwd,trigger:'blur'}
            ],
            surepassword:[
              {required:true,message:'请再次输入密码',trigger:'blur'},
              {validator:checkPwdSure,trigger:'blur'}
            ]

          }
        };
      },
      methods: {
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }

    }
</script>

4、页面代码

<template>

  <div class="w">
    <header>
      <div class="logo">
        <a href="index.html"> <img src="data:images/logo.png" alt=""></a>
      </div>
    </header>
    <div class="registerarea">
      <h3>注册新用户
        <div class="login">我有账号，去<router-link to="/">登陆</router-link></div>
      </h3>
      <div class="reg_form">

        <el-form style="width: 60%" :model="UserForm" :rules="rules" ref="UserForm" label-width="100px">
          <ul>
            <li>
              <el-form-item label="昵称" prop="nickName" >
                <el-input v-model="UserForm.nickName" placeholder="请输入账号" ></el-input>
              </el-form-item>
            </li>
            <li>
              <el-form-item label="姓名" prop="userName">
                <el-input v-model="UserForm.userName" placeholder="请输入姓名" ></el-input>
              </el-form-item>
            </li>
            <li>
              <el-form-item label="性别" prop="gender">
                <el-input v-model="UserForm.gender" placeholder="请输入性别" ></el-input>
              </el-form-item>
            </li>
            <li>
              <el-form-item label="身份证" prop="IdCard">
                <el-input v-model="UserForm.IdCard" placeholder="请输入身份证" ></el-input>
              </el-form-item>
            </li>
            <li>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="UserForm.email" placeholder="请输入邮箱" ></el-input>
              </el-form-item>
            </li>
            <li>
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="UserForm.phone" placeholder="请输入电话号码" ></el-input>
              </el-form-item>
            </li>
            <li>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="UserForm.password" placeholder="请输入密码" ></el-input>
              </el-form-item>
            </li>
            <li>
              <el-form-item label="确认密码" prop="surepassword">
                <el-input type="password" v-model="UserForm.surepassword" placeholder="请再次输入密码" ></el-input>
              </el-form-item>
            <li class="agree"><input type="checkbox" name="" id="">
              同意协议并注册 <a href="#">《知晓用户协议》</a>

            </li>
            <li>
              <el-form-item>
                <el-button round type="primary" @click="submitForm('UserForm')">注册</el-button>
                <el-button round type="primary" @click="resetForm('UserForm')">重置</el-button>
              </el-form-item>
            </li>
          </ul>
        </el-form>
      </div>
    </div>
    <footer>
      <div class="mod_copyright">
        <div class="links">
          <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 友情链接 | English Site | Contact U
        </div>

      </div>
    </footer>
  </div>

</template>