添加学生时，校验密码、手机号

xiangpei

2024-07-09 c6d7797e671d46334726e5df1bac698722aa6eb7

添加学生时，校验密码、手机号

 src/views/user/student/edit.vue

@@ -2,14 +2,17 @@
  <div class="app-container">

    <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules">
      <el-form-item label="用户名："  prop="userName" required>
        <el-input v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码："  required>
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名：" prop="realName" required>
        <el-input v-model="form.realName"></el-input>
      </el-form-item>
      <el-form-item label="手机：" prop="phone" required>
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="登录账号：" prop="userName" required>
        <el-input v-model="form.userName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="登录密码：" prop="password" required>
        <el-input v-model="form.password" show-password autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄：">
        <el-input v-model="form.age"></el-input>
@@ -20,16 +23,13 @@
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期：">
        <el-date-picker v-model="form.birthDay" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
        <el-date-picker v-model="form.birthDay" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"/>
      </el-form-item>
      <el-form-item label="手机：">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
<!--      <el-form-item label="年级：" prop="userLevel" required>-->
<!--        <el-select v-model="form.userLevel" placeholder="年级">-->
<!--          <el-option v-for="item in levelEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <!--      <el-form-item label="年级：" prop="userLevel" required>-->
      <!--        <el-select v-model="form.userLevel" placeholder="年级">-->
      <!--          <el-option v-for="item in levelEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <el-form-item label="状态：" required>
        <el-select v-model="form.status" placeholder="状态">
          <el-option v-for="item in statusEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>
@@ -49,6 +49,30 @@

export default {
  data () {
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!/[A-Z]/.test(value)) {
        callback(new Error('密码必须包含至少一个大写字母'))
      } else if (!/[a-z]/.test(value)) {
        callback(new Error('密码必须包含至少一个小写字母'))
      } else if (!/[0-9]/.test(value)) {
        callback(new Error('密码必须包含至少一个数字'))
      } else {
        callback()
      }
    }
    var validatePhone = (rule, value, callback) => {
      // 手机号验证逻辑
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!value) {
        callback(new Error('请输入手机号'));
      } else if (!phoneRegex.test(value)) {
        callback(new Error('手机号格式不正确'));
      } else {
        callback();
      }
    }
    return {
      form: {
        id: null,
@@ -70,6 +94,12 @@
        ],
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ],
        phone: [
          { validator: validatePhone, trigger: 'blur' }
        ]
      }
    }