1. <template>
    2.   <div class="home">
    3.     <el-form
    4.       status-icon
    5.       :model="ruleForm"
    6.       :rules="rules"
    7.       ref="ruleForm"
    8.       label-width="100px"
    9.       class="demo-ruleForm"
    10.     >
    11.       <el-form-item label="用户名" prop="name">
    12.         <el-input v-model="ruleForm.name"></el-input>
    13.       </el-form-item>
    14.       <el-form-item label="密码" prop="pass">
    15.         <el-input
    16.           type="password"
    17.           v-model="ruleForm.pass"
    18.           autocomplete="off"
    19.         ></el-input>
    20.       </el-form-item>
    21.       <el-form-item label="确认密码" prop="checkPass">
    22.         <el-input
    23.           type="password"
    24.           v-model="ruleForm.checkPass"
    25.           autocomplete="off"
    26.         ></el-input>
    27.       </el-form-item>
    28.       <el-form-item>
    29.         <el-button type="primary" @click="submitForm('ruleForm')"
    30.           >立即创建</el-button
    31.         >
    32.       </el-form-item>
    33.     </el-form>
    34.   </div>
    35. </template>
    37. <script>
    38. export default {
    39.   name: "Home",
    40.   data() {
    41.     var validatePass = (rule, value, callback) => {
    42.       if (value === "") {
    43.         callback(new Error("密码不能为空"));
    44.       } else {
    45.         /* 数字,大小写字母,特殊字符组成长度不能小于6 */
    46.         var reg = /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{6,}$/;
    47.         if (!reg.test(value)) {
    48.           callback(
    49.             new Error("密码必须由数字,大小写字母,特殊字符组成长度不能小于6")
    50.           );
    51.         } else {
    52.           callback();
    53.         }
    54.       }
    55.     };
    56.     var validateCheckPass = (rule, value, callback) => {
    57.       if (value === "") {
    58.         callback(new Error("请再次输入密码"));
    59.       } else if (value !== this.ruleForm.pass) {
    60.         callback(new Error("两次输入密码不一致!"));
    61.       } else {
    62.         callback();
    63.       }
    64.     };
    65.     return {
    66.       ruleForm: {
    67.         name: "",
    68.         pass: "",
    69.         checkPass: "",
    70.       },
    71.       //表单验证规则
    72.       rules: {
    73.         name: [
    74.           { required: true, message: "请输入用户名", trigger: "blur" },
    75.           { min: 5, message: "用户名最少是5个字符", trigger: "blur" },
    76.         ],
    77.         pass: [{ required: true, validator: validatePass }],
    78.         checkPass: [
    79.           { required: true, validator: validateCheckPass, trigger: "blur" },
    80.         ],
    81.       },
    82.     };
    83.   },
    84.   methods: {
    85.     submitForm(formName) {
    86.       this.$refs[formName].validate((valid) => {
    87.         console.log(valid);
    88.         if (valid) {
    89.           alert("submit!");
    90.           // HTTP
    91.         } else {
    92.           console.log("error submit!!");
    93.           return false;
    94.         }
    95.       });
    96.     },
    97.   },
    98. };
    99. </script>
    100. <style scoped>
    101. </style>