elementUI表单校验

注册组件表单校验

<template>
    <div class="registerContent">
        <nav id="nav-bg"></nav>
        <div class="main">
            <div class="register">
                <h1>新用户注册</h1>
                <el-form :model="ruleForm" status-icon :rules="rules2" ref="ruleForm" label-width="456px" class="demo-ruleForm">
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="图片验证码" prop="verycode">
                        <el-input v-model="ruleForm.verycode" placeholder="请输入图片验证码"></el-input>
                    </el-form-item>
                    <el-form-item label="手机验证码" prop="sms_code">
                        <el-input v-model="ruleForm.sms_code" placeholder="请输入手机验证码"></el-input>
                    </el-form-item>
                    <el-form-item label="请设置密码" prop="password">
                        <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPassword">
                        <el-input type="password" v-model="ruleForm.checkPassword" placeholder="请再次确认密码"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人姓名" prop="username">
                        <el-input v-model="ruleForm.username" placeholder="请输入联系人姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="公司法定名称" prop="company_name">
                        <el-input v-model="ruleForm.company_name" placeholder="请输入公司法定名称"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="agree">
                        <el-checkbox label="我已阅读并同意" name="agree" v-model="ruleForm.agree"></el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即注册</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    //手机号
    var validatePhone = (rule, value, callback) => {
      if (/^1[34578]{1}\d{9}$/.test(value) == false) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    // 密码
    var validatePass = (rule, value, callback) => {
      if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,20}$/.test(value) == false) {
        callback(new Error("请输入6-20位密码，必须包含大小写字母和数字"));
      } else {
        callback();
      }
    };
    // 确认密码
    var validatePass2 = (rule, value, callback) => {
      if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,20}$/.test(value) == false) {
        callback(new Error("请输入6-20位密码，必须包含大小写字母和数字"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    // 联系人姓名
    var validateUsername = (rule, value, callback) => {
      if (/^[0-9a-zA-Z\u4e00-\u9fa5_]{2,20}$/.test(value) == false) {
        callback(
          new Error("姓名可包含2-20位汉字、数字、字母（大小写）、下划线!")
        );
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        phone: "",
        verycode: "",
        sms_code: "",
        password: "",
        checkPassword: "",
        username: "",
        company_name: "",
        agree: []
      },
      rules2: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validatePhone, trigger: "blur" }
        ],
        verycode: [
          { required: true, message: "请输入图片验证码", trigger: "blur" },
          { min: 4, max: 4, message: "请输入正确的图片验证码", trigger: "blur" }
        ],
        sms_code: [
          { required: true, message: "请输入手机验证码", trigger: "blur" },
          { min: 4, max: 4, message: "请输入正确的手机验证码", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" }
        ],
        checkPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" }
        ],
        username: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
          { validator: validateUsername, trigger: "blur" }
        ],
        company_name: [
          { required: true, message: "请输入公司法定名称", trigger: "blur" },
          { min: 2, max: 4, message: "请输入正确的公司法定名称", trigger: "blur" }
        ],
        agree: [
          { type: "array", required: true, message: "请阅读并勾选注册协议", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>