Vue之如何实现注册界面和输入验证

从年少到古稀
113 阅读1分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路

注册界面在每一个网站里都是十分重要的 而我们如何实现注册界面和对输入的数据进行验证的 首先我是使用了和vue十分搭配的Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 网址为：element.eleme.cn/#/zh-CN

而这么去导入和下载依赖都有很详细的教程在此就不拉开讲了

首先是页面的布局代码和css代码

<template>
  <body id="poster">
<el-form class="login-container"   :model="ruleForm" status-icon :rules="rules" ref="ruleForm" >
  <h3 class="login_title">系统注册</h3>
  <el-form-item label="账号" prop="username"  >
  <el-input type="text" v-model="ruleForm.username" autocomplete="off"  style="width: 260px;margin-left: 30px"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="pass" >
    <el-input type="password" v-model="ruleForm.password" autocomplete="off" style="width: 260px;margin-left: 30px"></el-input>
  </el-form-item>

  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" style="width: 260px;margin-left: 0px" ></el-input>
  </el-form-item>
   <el-form-item label="注册人" prop="peoplename"  >
  <el-input type="text" v-model="ruleForm.peoplename" autocomplete="off"  style="width: 260px;margin-left: 15px"></el-input>
  </el-form-item>
  <el-form-item label="联系电话" prop="peoplename"  >
    <el-input type="text" v-model="ruleForm.talkinfo" autocomplete="off"  style="width: 260px;margin-left: 0px"></el-input>
  </el-form-item>
  <el-form-item >
    <el-input type="userface" v-model="ruleForm.userface"  autocomplete="off" style="display:none"  readonly="readonly"></el-input>
  </el-form-item>

  <el-form-item >
    <el-input type="userface" v-model="ruleForm.userface"  autocomplete="off"  style="display:none" readonly="readonly"></el-input>
  </el-form-item>


  <el-form-item align="center">
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm()">重置</el-button>
  </el-form-item>
</el-form>
  </body>
</template>

<style>
  .el-header {
    background-color: #ffffff;
    color: #333;
    line-height: 60px;
  }

  #poster {
    /*background:url("") no-repeat;*/
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
  body{
    margin: 0px;
    padding: 0;
  }
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #032231;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
</style>

界面的样式为

image.png

然后怎么进行验证呢 首先是通过这种方式对验证规则和验证方法进行一个绑定:rules="rules"

<el-form class="login-container"   :model="ruleForm" status-icon :rules="rules" ref="ruleForm" >


     rules: {
username: [
         { validator: validateUsername, trigger: 'blur' }
       ],
       pass: [
         { validator: validatePass, trigger: 'blur' }
       ],
       checkPass: [
         { validator: validatePass2, trigger: 'blur' }
       ]
     }

然后再用回调函数进行一个判断和验证

var validateUsername = (rule, value, callback) => {
   if (value === '') {
     callback(new Error('请输入账号'));
   } else {

     callback();
   }
 };
 var validatePass = (rule, value, callback) => {
   if (value === '') {
     callback(new Error('请输入密码'));
   } else {
     if (this.ruleForm.checkPass !== '') {
       this.$refs.ruleForm.validateField('checkPass');
     }
     callback();
   }
 };

 var validatePass2 = (rule, value, callback) => {
   if (value === '') {
     callback(new Error('请再次输入密码'));
   } else if (value !== this.ruleForm.password) {
     callback(new Error('两次输入密码不一致!'));
   } else {
     callback();
   }
 };

这样子一个简单的注册界面和输入信息验证就好了 你也可以在验证的回调函数里对信息进行一个正则表达式的验证

而完整代码在下 有需要的自行粘贴

<template>
  <body id="poster">
<el-form class="login-container"   :model="ruleForm" status-icon :rules="rules" ref="ruleForm" >
  <h3 class="login_title">系统注册</h3>
  <el-form-item label="账号" prop="username"  >
  <el-input type="text" v-model="ruleForm.username" autocomplete="off"  style="width: 260px;margin-left: 30px"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="pass" >
    <el-input type="password" v-model="ruleForm.password" autocomplete="off" style="width: 260px;margin-left: 30px"></el-input>
  </el-form-item>

  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" style="width: 260px;margin-left: 0px" ></el-input>
  </el-form-item>
   <el-form-item label="注册人" prop="peoplename"  >
  <el-input type="text" v-model="ruleForm.peoplename" autocomplete="off"  style="width: 260px;margin-left: 15px"></el-input>
  </el-form-item>
  <el-form-item label="联系电话" prop="peoplename"  >
    <el-input type="text" v-model="ruleForm.talkinfo" autocomplete="off"  style="width: 260px;margin-left: 0px"></el-input>
  </el-form-item>
  <el-form-item >
    <el-input type="userface" v-model="ruleForm.userface"  autocomplete="off" style="display:none"  readonly="readonly"></el-input>
  </el-form-item>

  <el-form-item >
    <el-input type="userface" v-model="ruleForm.userface"  autocomplete="off"  style="display:none" readonly="readonly"></el-input>
  </el-form-item>


  <el-form-item align="center">
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm()">重置</el-button>
  </el-form-item>
</el-form>
  </body>
</template>

<script>
  export default {
    data() {
     var validateUsername = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号'));
        } else {

          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };

      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
   username: '',
          talkinfo:'',
          password: '',
          checkPass: '',
          peoplename:'',
        userface:'user'
        },
        rules: {
   username: [
            { validator: validateUsername, trigger: 'blur' }
          ],
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
      const _this = this
             this.$axios.post('http://localhost:8568/111',this.ruleForm).then(function (response) {

     if(response.data=="用户名不能包含敏感词"){

      alert("用户名不能包含敏感词")
         _this.ruleForm.username=null

     } else {
         alert("注册成功")
         _this.$router.push('/login')

           }
             })

        }
          else {
            console.log('error submit!!');
            _this.$refs[formName].resetFields();
            return false;
          }
    })
  },
      resetForm(){
        this.ruleForm.username=null
        this.ruleForm.talkinfo=null
        this.ruleForm.password=null
        this.ruleForm.checkPass=null
        this.ruleForm.peoplename=null
      }
    },}
</script>
<style>
  .el-header {
    background-color: #ffffff;
    color: #333;
    line-height: 60px;
  }

  #poster {
    /*background:url("") no-repeat;*/
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
  body{
    margin: 0px;
    padding: 0;
  }
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #032231;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
</style>
avatar
文章
阅读
粉丝