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

简介: 这篇文章介绍了如何在Vue框架中将表单输入验证逻辑封装到一个JavaScript文件中,并通过正则表达式验证邮箱、身份证、手机号等信息,同时确保两次密码输入的一致性。

文章目录

    • 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="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>
相关文章
|
15天前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
130 59
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
9天前
|
JavaScript 前端开发 API
javaScript中常用的String方法以及注意点总结
本文总结了JavaScript中常用的String对象的方法及其注意事项,包括大小写转换、字符获取、子字符串截取、字符串拼接、去除空格、替换、分割以及查找字符串中字符的索引等操作。提供了每种方法的使用示例代码,帮助理解它们的具体用法和差异。
22 2
|
10天前
|
JavaScript 前端开发
JS之concat方法
本文介绍了JavaScript中`concat`方法的使用,展示了如何利用该方法来合并数组,包括与字符串、数字、对象等类型的拼接,以及使用扩展运算符进行合并的示例。
10 0
JS之concat方法
|
15天前
|
JavaScript 前端开发 API
JavaScript 验证 API
JavaScript 验证 API
18 2
|
15天前
|
JavaScript 前端开发
JavaScript 中的新 Set 方法
JavaScript 中的新 Set 方法
|
5天前
|
JavaScript 前端开发
JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?
JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?
|
5天前
|
JavaScript 前端开发
JavaScript从二维数组抽取元素组成新数组的三种方法
JavaScript从二维数组抽取元素组成新数组的三种方法
|
5天前
|
JavaScript 前端开发
用Javascript对二维数组DIY按汉语拼音的排序方法
用Javascript对二维数组DIY按汉语拼音的排序方法
|
7天前
|
JSON JavaScript 前端开发
6-19|Python数据传到JS的方法
6-19|Python数据传到JS的方法