(ElementPlus)操作(不使用 ts): Form表单检验、规则及案例分析(这一篇就够了)

news2025/1/16 6:57:43

Ⅰ、Form 表单检验简介：

1、什么是 Form 表单检验？

其一、属性：

表单验证是 javascript 中的高级选项之一；

其二、定义：

JavaScript 在数据被送往服务器前对 HTML 中的 Form 表单中的这些输入数据进行验证的行为就称为表单检验;

2、为什么要使用 Form 表单检验(意义)？

其一、前端提前校验可以 省去一些错误的请求提交，为后端节省接口压力(即：减轻服务器的压力);

其二、保证输入的数据符合要求，便于数据交互;

其三、保证数据的可行性(即：数据符合要求)和安全性;

Ⅱ、Form 表单校验的属性和参数情况:

1、Form 表单校验的基本流程：

其一、声明表单对象：ref="ruleFormRef"

A、表单对象：

此时的 ruleFormRef 就是 el-form 的表单对象，声明的表单对象的属性，一般情况下都是和接口所需的字段保持一致，这样在传输数据的时候更加方便省事；

B、注意事项：一定要声明;

在这里插入图片描述

const ruleFormRef = ref(null)   // 注意：一定要定义 form 表单中 ref 的 ruleFormRef 的值，否则会一直报错;

其二、表单数据对象: :model="ruleForm"

A、先用 ref 进行声明(此时的 ruleForm 才会有响应式)：

在这里插入图片描述

B、el-form-item 中绑定的值，一定要是 ruleForm 中定义的值;

// 即：在此时的 el-input 中 v-model=“ruleForm.passWord” 绑定的值，是在 ruleForm 中定义的;

在这里插入图片描述

其三、表单验证规则: :rules="rules"

A、rules 中定义的就是校验的规则，一般是使用属性和参数：

在这里插入图片描述

B、rules 中定义的就是校验的规则，也可能使用自定义校验函数：

// 自定义函数指的是：validator: validatePass，而 validatePass 函数是校验 passWord 属性的函数(即：自定义的校验规则);

在这里插入图片描述

在这里插入图片描述

2、Form 表单属性及参数情况：

其一、常用的属性：

属性属性含义属性值
required是否必填true / false
message校验不通过的信息提示string 类型，自定义
trigger验证逻辑的触发方式blue（失去焦点触发） / change（对应的数据改变时触发）
pattern验证数据的正则表达式满足要求的正则表达式
type验证数据的类型array, string, data, string, numer, email …
min输入的最小长度number类型，自定义
max输入的最大长度number类型，自定义
validator自定义校验规则是函数并有三个参数： rule【当前校验规则】； value【输入框的数据】； callback【回调函数，不管是否通过校验都必须执行，当校验不通过的时候，显示提示信息：callback(new Error(‘提示信息’))】

其二、需要注意的情况：

A、规则对象的属性和表单数据对象的属性必须保持一致：

// 此时是指：rules 中的属性值 和 ruleForm 中的属性值 要保持一致(以 checkPassWord 为例)；

在这里插入图片描述
在这里插入图片描述

B、el-item-form 上必须要 prop="表格属性值" 才能触发校验工作:

在这里插入图片描述

C、规则对象的属性的属性值是 Array，表示可以绑定多个校验规则(暂时未搞懂)；

D、自定义校验规则的时候，不管是否通过校验，callback() 函数都必须执行；

// 此时的 validatePass 函数是自定义校验函数，该函数无论是否通过校验都会被执行(即：都会最终执行 callback() 函数);

在这里插入图片描述

3、Form 表单属性的实际用法：

其一、required、message、trigger 属性的用法：

A、此时的 required 为 true 时，校验表单前面有 在这里插入图片描述标记(表示必填)、message 是输入为空时要提示的信息、trigger 是指触发方式( blur 表示：失去焦点 );

在这里插入图片描述

B、代码为：


<script setup>

import {ref} from 'vue'

const ruleFormRef = ref(null)   // 注意：一定要定义 form 表单中 ref 的 ruleFormRef 的值，否则会一直报错;

const ruleForm = ref({
  name: '',
})


// 重置的操作;
const resetForm = (val) => {
  debugger
  if (!val) return
  val.resetFields()  // resetFields 函数：是将表单字段的值重置为其默认值;
}

const rules = ref({
  name: [
    { required: true, message: 'name 不能为空', trigger: 'blur' },       // 此时是防空判断;
  ],
})


// 此时是：提交表单的操作;
const submitForm = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid) => {  // 注意：此时使用的是 ruleFormRef.value，而仅写 ruleFormRef 是拿不到值且会报错的;
    if (valid) {   // 注意：只有当所有的规则都满足后，此时的 valid 的值才为 true，才能执行下面的值;
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

</script>

<template>
  <div class="project_background">
    <div class="my_project">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon    
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      > 
        <el-form-item label="name:" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入"/>
        </el-form-item> 
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"><el-icon :size="20" style="margin-right: 5px;"><CircleCheckFilled /></el-icon>Submit</el-button>
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
 .project_background {
  margin: 30px auto;
  background-color: #e6f1f9;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;
  .my_project {
    margin: 20px;
  }
 }
</style>

C、输入为空的页面展示为：

在这里插入图片描述

其二、min、max 属性的用法：

A、min 指：输入的最小长度，max 指：输入的最大长度;

在这里插入图片描述

B、代码为：

<script setup>

import {ref} from 'vue'

const ruleFormRef = ref(null)   // 注意：一定要定义 form 表单中 ref 的 ruleFormRef 的值，否则会一直报错;

const ruleForm = ref({
  name: '',
})


// 重置的操作;
const resetForm = (val) => {
  debugger
  if (!val) return
  val.resetFields()  // resetFields 函数：是将表单字段的值重置为其默认值;
}

const rules = ref({
  name: [
    { required: true, message: 'name 不能为空', trigger: 'blur' },       // 此时是防空判断;
    { min: 7, max: 11, message: '长度在 7 到 11 个字符', trigger: 'blur' }  // 此时是：判断输入值是否是 7~11 位(即：name 的校验规则);
  ],
})


// 此时是：提交表单的操作;
const submitForm = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid) => {  // 注意：此时使用的是 ruleFormRef.value，而仅写 ruleFormRef 是拿不到值且会报错的;
    if (valid) {   // 注意：只有当所有的规则都满足后，此时的 valid 的值才为 true，才能执行下面的值;
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

</script>

<template>
  <div class="project_background">
    <div class="my_project">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon    
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      > 
        <el-form-item label="name:" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入"/>
        </el-form-item> 
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"><el-icon :size="20" style="margin-right: 5px;"><CircleCheckFilled /></el-icon>Submit</el-button>
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
 .project_background {
  margin: 30px auto;
  background-color: #e6f1f9;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;
  .my_project {
    margin: 20px;
  }
 }
</style>

C、输入要求长度的页面展示为：

在这里插入图片描述

在这里插入图片描述

其三、type 属性的用法：

A、type 指：输入数据的类型;

在这里插入图片描述

B、代码为：


<script setup>

import {ref} from 'vue'

const ruleFormRef = ref(null)   // 注意：一定要定义 form 表单中 ref 的 ruleFormRef 的值，否则会一直报错;

const ruleForm = ref({
  email: '',
})


// 重置的操作;
const resetForm = (val) => {
  debugger
  if (!val) return
  val.resetFields()  // resetFields 函数：是将表单字段的值重置为其默认值;
}

const rules = ref({
   email: [
     { required: true, message: 'email 不能为空', trigger: 'blur' },    // 此时是防空判断;
     { type: "email",  message: "请输入正确的邮箱",  trigger: "blur"  }   // 此时是：判断是否是正确邮箱格式(即：邮箱的校验规则);
   ],
})


// 此时是：提交表单的操作;
const submitForm = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid) => {  // 注意：此时使用的是 ruleFormRef.value，而仅写 ruleFormRef 是拿不到值且会报错的;
    if (valid) {   // 注意：只有当所有的规则都满足后，此时的 valid 的值才为 true，才能执行下面的值;
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

</script>

<template>
  <div class="project_background">
    <div class="my_project">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon    
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      > 
        <el-form-item label="邮箱地址:" prop="email">
          <el-input v-model="ruleForm.email" placeholder="请输入"/>
        </el-form-item> 
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"><el-icon :size="20" style="margin-right: 5px;"><CircleCheckFilled /></el-icon>Submit</el-button>
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
 .project_background {
  margin: 30px auto;
  background-color: #e6f1f9;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;
  .my_project {
    margin: 20px;
  }
 }
</style>

C、输入要求类型的页面展示为：

在这里插入图片描述

在这里插入图片描述

其四、pattern 属性的用法：

A、pattern 指：输入数据的正则表达式;

在这里插入图片描述

B、代码为：


<script setup>

import {ref} from 'vue'

const ruleFormRef = ref(null)   // 注意：一定要定义 form 表单中 ref 的 ruleFormRef 的值，否则会一直报错;

const ruleForm = ref({
  phone: '',
})


// 重置的操作;
const resetForm = (val) => {
  debugger
  if (!val) return
  val.resetFields()  // resetFields 函数：是将表单字段的值重置为其默认值;
}

const rules = ref({
    phone: [
     { required: true, message: 'phone 不能为空', trigger: 'blur' },    // 此时是防空判断;
     { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的电话", trigger: "blur" }  // 此时是：手机号的校验规则；
   ]
})


// 此时是：提交表单的操作;
const submitForm = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid) => {  // 注意：此时使用的是 ruleFormRef.value，而仅写 ruleFormRef 是拿不到值且会报错的;
    if (valid) {   // 注意：只有当所有的规则都满足后，此时的 valid 的值才为 true，才能执行下面的值;
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

</script>

<template>
  <div class="project_background">
    <div class="my_project">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon    
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      > 
        <el-form-item label="手机号:" prop="phone">    <!-- 注意：一定要在 el-form-item 上添加 prop 值的绑定，否则不会触发校验; -->
          <el-input v-model="ruleForm.phone" placeholder="请输入"/>
        </el-form-item> 
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"><el-icon :size="20" style="margin-right: 5px;"><CircleCheckFilled /></el-icon>Submit</el-button>
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
 .project_background {
  margin: 30px auto;
  background-color: #e6f1f9;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;
  .my_project {
    margin: 20px;
  }
 }
</style>

C、输入要求正则表达式的页面展示为：

在这里插入图片描述

在这里插入图片描述

其五、validator 属性的用法：

A、validator 指：自定义校验规则的函数;

在这里插入图片描述
在这里插入图片描述

B、代码为：


<script setup>

import {ref} from 'vue'

const ruleFormRef = ref(null)   // 注意：一定要定义 form 表单中 ref 的 ruleFormRef 的值，否则会一直报错;

const ruleForm = ref({
  age: '',
})


// 重置的操作;
const resetForm = (val) => {
  debugger
  if (!val) return
  val.resetFields()  // resetFields 函数：是将表单字段的值重置为其默认值;
}

// age 的规则是：让 age 的值，不能为空，为数字，且数字值不小于 18;
const checkAge = (rule, value, callback) => {
  if (!value) {  // 此时是判空，如果 age 中为空，就抛出该提示信息;
    return callback(new Error('Please input the age'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {   // 此时是：判断 age 中输入的值是否是数字，如果不是数字就抛出该提示信息;
      callback(new Error('Please input digits'))
    } else {
      if (value < 18) { // 此时是：判断 age 中输入的数字是否小于 18，如果小于 18，就抛出该提示信息;
        callback(new Error('Age must be greater than 18'))
      } else {
        callback()
      }
    }
  }, 1000)
}

const rules = ref({
  age: [
    { validator: checkAge, trigger: 'blur' }
  ],
})


// 此时是：提交表单的操作;
const submitForm = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid) => {  // 注意：此时使用的是 ruleFormRef.value，而仅写 ruleFormRef 是拿不到值且会报错的;
    if (valid) {   // 注意：只有当所有的规则都满足后，此时的 valid 的值才为 true，才能执行下面的值;
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

</script>

<template>
  <div class="project_background">
    <div class="my_project">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon    
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      > 
        <el-form-item label="Age:" prop="age">
          <el-input v-model.number="ruleForm.age" placeholder="请输入" autocomplete="off"/>
          <!-- 此时的 v-model.number 已经将校验的 value 值变成数字，而不再是字符串；  若没有 '.number' 这个属性值，那么校验的 value 值将是字符串; -->
        </el-form-item>  
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"><el-icon :size="20" style="margin-right: 5px;"><CircleCheckFilled /></el-icon>Submit</el-button>
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
 .project_background {
  margin: 30px auto;
  background-color: #e6f1f9;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;
  .my_project {
    margin: 20px;
  }
 }
</style>

C、自定义校验规则的页面展示为：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4、此上所述的代码和目标效果：

其一、整体代码为：


// 此时是去除 ts 的 Form 表单校验规则的 vue3 语法的代码：

<script setup>

import {ref} from 'vue'

const ruleFormRef = ref(null)   // 注意：一定要定义 form 表单中 ref 的 ruleFormRef 的值，否则会一直报错;

const ruleForm = ref({
  passWord: "",
  checkPassWord: "",
  age: '',
  name: '',
  ip: '',
  email: '',
  phone: ''
})


// 重置的操作;
const resetForm = (val) => {
  debugger
  if (!val) return
  val.resetFields()  // resetFields 函数：是将表单字段的值重置为其默认值;
}


// Password 的规则是：让 Password 的输入值，不能为空，且若 checkPassWord 的输入值不为空时，在 Password 的输入值后在执行一遍 checkPassWord 的规则;
const validatePass = (rule, value, callback) => {
  if (value === '') {  // 此时是判空，如果 Password 中为空，就抛出该提示信息;
    callback(new Error('Please input the password'))
  } else {
    if (ruleForm.value.checkPassWord !== '') {  // 此时是：判断 checkPassWord 输入的值是否为空;
      if (!ruleFormRef.value) return  // 只要 checkPassWord 中有输入，此时的 !ruleFormRef.value 的布尔值为 false;
      ruleFormRef.value.validateField('checkPassWord', () => null) // validateField 是用于对表单中的字段进行验证的方法，来确保数据的正确性;
                                                               // 个人理解是：在 checkPassWord 中有输入与 Password 的输入对比的操作，因此可以理解为：对 'checkPassWord'
                                                               // 进行监听，即：有执行了一遍 checkPassWord 的验证(确定：通过 debugger 验证了猜想);
    }
    callback()
  }
}

// checkPassWord 的规则是：让 checkPassWord 的输入值，不能为空，且与 Password 的输入值要保持一致;
const validatePass2 = (rule, value, callback) => {
  if (value === '') {  // 此时是判空，如果 checkPassWord 中为空，就抛出该提示信息;
    callback(new Error('Please input the password again'))
  } else if (value !== ruleForm.value.passWord) { // 此时是：判断 checkPassWord 输入的值是否与 Password 输入的值相同，若不相同，就抛出该提示信息;
    callback(new Error("Two inputs don't match!"))
  } else { // 只有 checkPassWord 输入的值与 Password 输入的值相同，才没问题(前提是：Passwork 与 checkPassWord 中都有值);
    callback()
  }
}


// age 的规则是：让 age 的值，不能为空，为数字，且数字值不小于 18;
const checkAge = (rule, value, callback) => {
  if (!value) {  // 此时是判空，如果 age 中为空，就抛出该提示信息;
    return callback(new Error('Please input the age'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {   // 此时是：判断 age 中输入的值是否是数字，如果不是数字就抛出该提示信息;
      callback(new Error('Please input digits'))
    } else {
      if (value < 18) { // 此时是：判断 age 中输入的数字是否小于 18，如果小于 18，就抛出该提示信息;
        callback(new Error('Age must be greater than 18'))
      } else {
        callback()
      }
    }
  }, 1000)
}

// phone 的规则是：让 phone 的值，不能为空，为数字，且符合手机号的校验规则;
const validatePhone = (rule, value, callback) => {
  if (!value) {  // 此时是判空，如果 phone 中为空，就抛出该提示信息;
    return callback(new Error('Please input the phone number'))
  } 
  setTimeout(() => {
    if(!Number.isInteger(Number(value))) { // 此时是：判断 phone 中输入的值是否是数字，如果不是数字就抛出该提示信息;
                                           // 此时：虽然 value 的值是一个字符串，但是当输入的是数字时，通过 Number(value) 操作此时已经变成了数字, 然后再进行 Number.isInteger() 的判断;
      callback(new Error('Please input digits')) 
    } else {
      if(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value)) { // 此时是：判断 phone 中输入的数字是否符合手机号的校验规则，如果不符合就抛出提示信息;
        callback()
      } else {
        callback(new Error('Please input the valid phone number'))
      }
    }
  })
}

// 可能存在的判断是否有重复手机号的校验(即：根据后台的返回值来判断)：
// const checkTelCode = async (rule, value, callback) => {
//   if (value) {
//     await validPhoneUnique({ phonenumber: value }).then((response) => {
//       if (response.code == 200) {
//         callback();
//       } else {
//         callback(new Error("手机号已存在"));
//       }
//     });
//   }
// }

// 注意：在 rules 方法中 validator 属性后面的方法，一定要定义在 rules 函数前，否则会报错;
const rules = ref({
  // form 表单前面有没有小红星，取决于有没有 'required: true' 的属性，如果有这个属性页面就有小红星，而没有这个属性就没有小红星;
  passWord: [
    { required: true, validator: validatePass, trigger: 'blur' }
  ],
  checkPassWord: [
    { validator: validatePass2, trigger: 'blur' }
  ],
  age: [
    { validator: checkAge, trigger: 'blur' }
  ],
  name: [
    { required: true, message: 'name 不能为空', trigger: 'blur' },       // 此时是防空判断;
    { min: 7, max: 11, message: '长度在 7 到 11 个字符', trigger: 'blur' }  // 此时是：判断输入值是否是 7~11 位(即：name 的校验规则);
  ],
  ip: [
    { required: true, message: 'IP不能为空', trigger: 'blur' },
    { pattern: /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/, message: "请填写合法的IP地址", trigger: "blur"}
    // 此时的 pattern 是合法 ip 地址的正则表达式，当失去焦点后，就会触发正则表达式的判断, 若不满足正则表达式的条件就会提示 message 中的信息;
  ],
  email: [
    { required: true, message: 'email 不能为空', trigger: 'blur' },    // 此时是防空判断;
    { type: "email",  message: "请输入正确的邮箱",  trigger: "blur"  }   // 此时是：判断是否是正确邮箱格式(即：邮箱的校验规则);
  ],
  phone: [
    { required: true, validator: validatePhone, trigger: 'blur' },    // 此时是防空判断;
    // { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的电话", trigger: "blur" }  // 此时是：手机号的校验规则；
  ]
})


// 此时是：提交表单的操作;
const submitForm = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid) => {  // 注意：此时使用的是 ruleFormRef.value，而仅写 ruleFormRef 是拿不到值且会报错的;
    if (valid) {   // 注意：只有当所有的规则都满足后，此时的 valid 的值才为 true，才能执行下面的值;
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

</script>

<template>
  <div class="project_background">
    <div class="my_project">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon    
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >  <!-- 此时的 status-icon 属性是决定在框里右侧的图标的(符合规则的图标或不符合规则的图标) -->
        <el-form-item label="Password:" prop="passWord">
          <el-input v-model="ruleForm.passWord" type="password" placeholder="请输入" autocomplete="off" />
        </el-form-item>
        <el-form-item label="checkPassWord:" prop="checkPassWord">
          <el-input v-model="ruleForm.checkPassWord" type="password" placeholder="请输入" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="Age:" prop="age">
          <el-input v-model.number="ruleForm.age" placeholder="请输入" autocomplete="off"/>
          <!-- 此时的 v-model.number 已经将校验的 value 值变成数字，而不再是字符串；  若没有 '.number' 这个属性值，那么校验的 value 值将是字符串; -->
        </el-form-item>
        <el-form-item label="name:" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入"/>
        </el-form-item> 
        <el-form-item label="IP地址:" prop="ip">
          <el-input v-model="ruleForm.ip" placeholder="请输入"/>
        </el-form-item> 
        <el-form-item label="邮箱地址:" prop="email">
          <el-input v-model="ruleForm.email" placeholder="请输入"/>
        </el-form-item> 
        <el-form-item label="手机号:" prop="phone">  <!-- 注意：一定要在 el-form-item 上添加 prop 值的绑定，否则不会触发校验; -->
          <el-input v-model="ruleForm.phone" placeholder="请输入"/>
        </el-form-item> 
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"><el-icon :size="20" style="margin-right: 5px;"><CircleCheckFilled /></el-icon>Submit</el-button>
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
 .project_background {
  margin: 30px auto;
  background-color: #e6f1f9;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;
  .my_project {
    margin: 20px;
  }
 }
</style>

其二、页面展示为：

// 全空的情况；

在这里插入图片描述

// 全不满足检验的情况;

在这里插入图片描述

// 全满足检验的情况；

在这里插入图片描述

Ⅲ、Form 表单校验的实际案例：

1、代码为：


// 此时是去除 ts 的 Form 表单校验规则的 vue3 语法的代码：

<script setup>

    import { ElMessage } from 'element-plus'
    import { ref, reactive } from 'vue'

    const loginFormRef = ref(null);

    // 表单对象
    const loginForm = reactive({
        username: '',
        password: '',
        agree: true
    });



    // 规则对象
    /**
     * 自定义校验函数 - 参数介绍
     * @param { any } rule 当前对应的规则
     * @param { any } value 对应文本框的值
     * @param { any } callback 回调函数，不管是否通过校验，都必须执行
    */


    const validatorUsername = (rule, value, callback) => {
        if (!/^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/.test(value)) return callback(new Error("请输入正确格式的手机号！"));
        callback();
    };


    const validatorPwd = (rule, value, callback) => {
        // 检验密码强度
        if (/\d/.test(value) && /[a-z]/.test(value) && /[A-Z]/.test(value)) return callback();
        callback( new Error("密码强度较弱，请输入带有 大写字母、小写字母、数字三种字符组合的密码！"));
    };

    
    const formRules = {
        username: [
            // required - 是否必填
            // message - 校验不通过的提示信息
            // trigger - 校验的触发方式【blur - 失去焦点触发；change - v-model绑定的值改变触发】
            { required: true, message: '用户名不能为空', trigger: 'blur' },

            // validator - 自定义校验规则
            { validator: validatorUsername, trigger: 'blur' }
        ],
        password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },

            // min - 最小长度
            // max - 最大长度
            { min: 6, max: 14, message: '密码长度为 6~14 个字符', trigger: 'blur' },
            { validator: validatorPwd, triger: 'blur' }
        ],
        agree: [
            // 自定义校验规则
            {
              validator: (rule, value, callback) => {
                  if (!value) return callback(new Error('请勾选同意协议！'));
                  callback();
              },
              trigger: 'change'
            }
        ]
    };
    

    // TODO 表单整体校验 + 登录
    const login = () => {
      loginFormRef.value.validate((valid) => {
            // 不通过校验
            if (!valid) return ElMessage.error('请填写 登录信息 或 同意协议 再进行登录操作！');
            // 通过校验
            // 登录逻辑
        });
    };
</script>

<template>
    <el-form :model="loginForm" :rules="formRules" ref="loginFormRef" label-position="right" label-width="60px" status-icon>
        <el-form-item label="账户" prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入手机号" />
        </el-form-item>
        
        <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" placeholder="请输入密码"/>
        </el-form-item>
        
        <el-form-item label-width="22px" prop="agree">
            <el-checkbox size="large" v-model="loginForm.agree">
                我已同意隐私条款和服务条款
            </el-checkbox>
        </el-form-item>
        
        <el-button size="large" class="subBtn" @click="login(loginFormRef)">点击登录</el-button>
    </el-form>
</template>

2、页面展示为：

// 打开页面;
在这里插入图片描述

// 报错时的提示：

在这里插入图片描述

// 未勾条款的报错：

在这里插入图片描述

// 成功时的页面：

在这里插入图片描述

Ⅳ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/896764.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MySQL索引介绍 为什么mysql使用B+树

MySQL索引介绍 为什么mysql使用B+树

什么是索引&#xff1f; 索引是一种用于快速查询和检索数据的数据结构&#xff0c;常见的索引结构有&#xff1a;B树&#xff0c;B树和Hash。 索引的作用就相当于目录。打个比方&#xff0c;我们在查字典的时候&#xff0c;如果没有目录&#xff0c;那我们就只能一页一页的去…
阅读更多...
文本三剑客之sed编辑器

文本三剑客之sed编辑器

sed 一、sed简介1.1 什么是sed&#xff1f;1.2 sed原理1.3 sed核心功能 二、sed命令格式详解2.1 命令格式2.2 常用选项2.3 sed脚本语法2.3.1 基本语法结构2.3.2 地址部分-----指定匹配范围2.3.3 命令部分-----要执行的命令 三、sed查找替换3.1 基本语法3.2 分组后向引用3.3 变量…
阅读更多...
.NET应用UI组件DevExpress XAF v23.1 - 全新的日程模块

.NET应用UI组件DevExpress XAF v23.1 - 全新的日程模块

DevExpress XAF是一款强大的现代应用程序框架&#xff0c;允许同时开发ASP.NET和WinForms。DevExpress XAF采用模块化设计&#xff0c;开发人员可以选择内建模块&#xff0c;也可以自行创建&#xff0c;从而以更快的速度和比开发人员当前更强有力的方式创建应用程序。 在新版中…
阅读更多...
【爬虫练习之glidedsky】爬虫-基础2

【爬虫练习之glidedsky】爬虫-基础2

题目 链接 爬虫往往不能在一个页面里面获取全部想要的数据&#xff0c;需要访问大量的网页才能够完成任务。 这里有一个网站&#xff0c;还是求所有数字的和&#xff0c;只是这次分了1000页。 思路 找到调用接口 可以看到后面有个参数page来控制页码 代码实现 import reques…
阅读更多...
Python功能制作之简单的3D特效

Python功能制作之简单的3D特效

需要导入的库&#xff1a; pygame: 这是一个游戏开发库&#xff0c;用于创建多媒体应用程序&#xff0c;提供了处理图形、声音和输入的功能。 from pygame.locals import *: 导入pygame库中的常量和函数&#xff0c;用于处理事件和输入。 OpenGL.GL: 这是OpenGL的Python绑定…
阅读更多...
win10下IDEA搭建web项目脚手架

win10下IDEA搭建web项目脚手架

参考 IDEA运行Maven项目配置全过程（菜鸟专属）_idea配置maven_Hi梅的博客-CSDN博客 下载 IDEA 下载JDK 1.8 https://pan.baidu.com/s/1lj2na9omGwhPrCKYNz1qSQ 提取码：izkj 点击exe一步步next 添加环境变量： JAVA_HOME 对于自己jdk的路径 添加系统变量PATH：%JAVA_H…
阅读更多...
混杂接口模式---vlan

混杂接口模式---vlan

策略在两个地方可以用--1、重发布 2、bgp邻居 2、二层可以干的&#xff0c;三层也可以干 3、未知单播&#xff1a;交换机的MAC地址表的记录保留时间是5分钟&#xff0c;电脑的ARP表的记录保留时间是2小时 4、route recursive-lookup tunnel 华为默认对于bgp学习来的路由不开启标…
阅读更多...
在Hive/Spark上执行TPC-DS基准测试 (PARQUET格式）

在Hive/Spark上执行TPC-DS基准测试 (PARQUET格式）

在上一篇文章：《在Hive/Spark上运行执行TPC-DS基准测试 (ORC和TEXT格式）》中，我们介绍了如何使用 hive-testbench 在Hive/Spark上执行TPC-DS基准测试，同时也指出了该项目不支持parquet格式。 如果我们想要生成parquet格式的测试数据，就需要使用其他工具了。本文选择使用另…
阅读更多...
深入了解Maven（一）

深入了解Maven（一）

目录 一.Maven介绍与功能 二.依赖管理 1.依赖的配置 2.依赖的传递性 3.排除依赖 4.依赖的作用范围 5.依赖的生命周期 一.Maven介绍与功能 maven是一个项目管理和构建工具&#xff0c;是基于对象模型POM实现。 Maven的作用&#xff1a; 便捷的依赖管理&#xff1a;使用…
阅读更多...
[.NET/WPF] CommunityToolkit.Mvvm 异步指令

[.NET/WPF] CommunityToolkit.Mvvm 异步指令

我们在开发中, 经常会有这样的需求: 点击按钮后, 进行一些耗时的工作工作进行时, 按钮不可再次被点击工作进行时, 会显示进度条, 或者 “加载中” 的动画 RelayCommand CommunityToolkit.Mvvm 中的 RelayCommand 除了支持最简单的同步方法, 还支持以 Task 作为返回值的异步方…
阅读更多...
开源语音聊天软件Mumble

开源语音聊天软件Mumble

网友 大气 告诉我&#xff0c;Openblocks在国内还有个版本叫 码匠&#xff0c;更贴合国内软件开发的需求&#xff0c;如接入了国内常用的身份认证&#xff0c;接入了国内的数据库和云服务&#xff0c;也对小程序、企微 sdk 等场景做了适配。 在 https://majiang.co/docs/docke…
阅读更多...
WooCommerce Product Bundles电商网站产品捆绑包

WooCommerce Product Bundles电商网站产品捆绑包

WooCommerce Product Bundles电商网站产品捆绑包是用于 WooCommerce 的最灵活、最强大的产品捆绑工具包&#xff0c;为数以千计的成功商店提供支持。它的产品分组、定价和运输功能旨在确保它在广泛的用例中发挥出色。很少有产品包无法处理的情况&#xff01; 网址&#xff1a;W…
阅读更多...
基于Simulink的Chaos混沌电路设计与仿真

基于Simulink的Chaos混沌电路设计与仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 07_001m 4.算法理论概述 混沌电路是一类特殊的非线性电路&#xff0c;其输出信号表现出无规律…
阅读更多...
黑马点评-项目集成git及redis实现短信验证码登录

黑马点评-项目集成git及redis实现短信验证码登录

目录 IDEA集成git 传统session存在的问题 redis方案 业务流程 选用的数据结构 整体访问流程 发送短信验证码 获取校验验证码 配置登录拦截器 拦截器注册配置类 拦截器 用户状态刷新问题 刷新问题解决方案 IDEA集成git 远程仓库采用码云&#xff0c;创建好仓库&…
阅读更多...
【STM32】FreeRTOS软件定时器学习

【STM32】FreeRTOS软件定时器学习

软件定时器 FreeRTOS提供了现成的软件定时器功能&#xff0c;可以一定程度上替代硬件定时器&#xff0c;但精度不高。 实验&#xff1a;创建一个任务&#xff0c;两个定时器&#xff0c;按键开启定时器&#xff0c;一个500ms打印一次&#xff0c;一个1000ms打印一次。 实现&…
阅读更多...
C++快速回顾（一）

C++快速回顾（一）

前言 在Android音视频开发中&#xff0c;网上知识点过于零碎&#xff0c;自学起来难度非常大&#xff0c;不过音视频大牛Jhuster提出了《Android 音视频从入门到提高 - 任务列表》&#xff0c;结合我自己的工作学习经历&#xff0c;我准备写一个音视频系列blog。C/C是音视频必…
阅读更多...
大型集团企业数字化管控平台及信息化治理服务体系建设方案PPT

大型集团企业数字化管控平台及信息化治理服务体系建设方案PPT

导读&#xff1a;原文《大型集团企业数字化管控平台及信息化治理服务体系建设方案PPT》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 喜欢文章&#xff0c;您可以点…
阅读更多...
B站视频码率用户上传视频的视频码率

B站视频码率用户上传视频的视频码率

一般来说&#xff0c;B站用户可以根据自己的视频内容和需求来选择视频的码率&#xff0c;但以下是一些常见的视频码率范围&#xff0c;供用户参考&#xff1a; 标清&#xff08;SD&#xff09;&#xff1a; 码率范围可能在500 Kbps至1.5 Mbps左右&#xff0c;适用于480p的分辨率…
阅读更多...
Vue的鼠标键盘事件

Vue的鼠标键盘事件

Vue的鼠标键盘事件 原生 鼠标事件(将v-on简写为) click // 点击 dblclick // 双击 mousedown // 按下 mousemove // 移动 mouseleave // 离开 mouseout // 移出 mouseenter // 进入 mouseover // 鼠标悬浮mousedown.left 键盘事件 keydown //键盘按下时触发 keypress …
阅读更多...
Kick Back Relax:Learning to Reconstruct the World by Watching SlowTV

Kick Back Relax:Learning to Reconstruct the World by Watching SlowTV

参考代码&#xff1a;slowtv_monodepth 这篇文章提出了一种在无标定数据集上自监督估计深度的方法&#xff0c;也就是通过网络预测的方式估计相机的内参&#xff0c;从而完成自监督流程。为了验证在无相机标定情况下实现自监督深度估计&#xff0c;从网络上下载了一些视频构建…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023