当前位置:   article > 正文

vue中的rules表单校验规则使用方法 :rules=“rules“

:rules=

一、el-form里面必写属性值

:ref="dataForm"        // 提交表单时进行校验

:rules="rules"            // return 下的校验规则
:model="userForm"  // 绑定表单的值

  1. <el-form
  2. ref="dataForm" // 必写属性值
  3. :rules="rules" // 必写属性值
  4. :model="userForm" // 必写属性值
  5. label-position="left"
  6. label-width="100px"
  7. >
  8. <el-row>
  9. <el-col :span="12">
  10. <el-form-item
  11. label="充值金额"
  12. prop="amount" // 必写属性值
  13. >
  14. <el-input
  15. v-model="userForm.amount" // 必写属性值
  16. placeholder="请输入充值金额"
  17. ></el-input>
  18. </el-form-item>
  19. </el-col>
  20. </el-row>
  21. </el-form>
  22. <div slot="footer" class="dialog-footer" align="center">
  23. <el-button @click="dialogFormVisible = false">返回</el-button>
  24. <el-button type="primary" @click="Recharge()" >
  25. 提交
  26. </el-button>
  27. </div>

二、:ref 提交表单时进行校验

点击提交时,会先对表单的值进行校验判断,校验通过后,再进行后续操作。

  1. Recharge() {
  2. this.$refs['dataForm'].validate((valid) => {
  3. if (valid) {
  4. // 校验通过、调充值接口的逻辑操作
  5. }
  6. })

三、:rules 校验规则

el-form-item 里面使用 prop 属性绑定规则

<el-form-item label="充值金额"  prop="amount"> ... ... </el-form-item>

required:显示输入框为选填或必填项;
message:提示信息;

pattern:正则表达式;

trigger:触发事件  =>  一般blur用于input、chang用于select,picker等;

  1. data() {
  2. return {
  3. rules: {
  4. amount: [
  5. { required: true, message: '充值金额不能为空', trigger: 'blur' },
  6. {
  7. pattern: /^\d+(\.\d{1,1})?$/,
  8. message: '金额为数字类型且最多保留1位小数',
  9. trigger: 'blur',
  10. },
  11. ],
  12. },
  13. }
  14. },

四、:model 绑定表单的值

el-input 里面使用 v-model 绑定表单值

<el-input  v-model="userForm.amount" ></el-input>

  1. data() {
  2. return {
  3. userForm: {
  4. amount: '',
  5. },
  6. }
  7. },

问题:

校验未通过,关闭弹窗再打开还存在的问题:

  1. this.dialogFormVisible = true
  2. this.$nextTick(() => {
  3. this.$refs['dataForm'].clearValidate()
  4. })

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/593274
推荐阅读
  

闽ICP备14008679号