element-ui中表单验证rules

妖狐艹你老母 2022-05-15 09:45 388阅读 0赞

我们在项目中头疼的是什么？对，你没有听错，就是表单验证，各种非空校验，正则校验等等

而初次使用元件的UI，在做表单验证的时候，由于项目急，自己呢，也没有时间去研究这个，结果比别人多写了500行的JS，有木有很夸张，所以，这个项目结束了，自己呢，去研究了下规则的神奇之处若有不足，请指出来，谢谢大佬们

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm" v-if="textFlag">

<el-form-item label="姓名" prop="name" class="form-height">

<el-input

v-model="ruleForm.name"

:class="nameClass? '':'active'"

:disabled="nameShell"

@focus="nameFocus"

maxlength="30"

></el-input>

</el-form-item>

<el-form-item class="submitBtn">

<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>

</el-form-item>

</el-form >

</div>

</template>

我们就以这一个为例子

首先我们在el-form上面添加下面这三个属性

:model="ruleForm" :rules="rules" ref="ruleForm"

:model="ruleForm" 是绑定我们form表单中需要提交给后台的一个对象

:rules="rules" 是动态绑定的rules，表单验证规则

ref="ruleForm"  是我们绑定的对象

然后在每一个el-form-item上面绑定prop属性，这个属性就是我们下面要做正则校验的地方，而下面所绑定的值，都是在ruleForm这个对象中，我们下面看具体的js代码。

1.  export default \{
2.  name: 'short-visit',
3.  data () \{
4.  let missionPass = (rule, value, callback) => \{ //就是我们的回调函数，需要大家注意的是，这个没有在return的对象中，在data中
5.  console.log(value)
6.  if (value.length > 1) \{
7.  if (value.indexOf('参加会议') !== -1) \{
8.  callback()
9.  \} else \{
10. callback(new Error('当出访任务为“参加会议”时才可进行多选，请重新勾选出访任务'))
11. \}
12. \} else \{
13. callback()
14. \}
15. \}
16. return \{
17. ruleForm: \{ // 存放数据的对象
18. name: '', // 姓名
19. \},
20. rules: \{ // 就是我们在el-form中绑定的rules，进行表单的验证
21. name: \[ // 我们在el-form-item中绑定的prop，就是这里的name，需要大家注意，这具有唯一性
22. \{ required: true, message: '请输入姓名', trigger: 'blur' \} // require:是否必填，如不设置，则会根据校验规则自动生成;message:是提示的内容；trigger：是什么事件触发
23. \],
24. MissionStatementType: \[
25. \{ required: true, message: '请选择具体的出访任务', trigger: 'change' \},
26. \{ validator: missionPass, trigger: 'change' \} // validator:对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
27. \]
28. \}
29. \}
30. \},
31. created () \{
32. /\*\*
33. \* 可以放我们初次进入页面的请求
34. \* \*/
35. \},
36. methods: \{
37. /\*\*
38. \* 数据的提交
39. \* \*/
40. submitForm (formName) \{
41. this.$refs\[formName\].validate((valid) => \{
42. if (valid) \{
43. this.$confirm('是否确认提交', \{
44. confirmButtonText: '确定',
45. cancelButtonText: '取消',
46. type: 'warning',
47. center: true
48. \}).then(() => \{
49. /\*\*
50. \* 发送ajax请求
51. \*
52. \*/
53. \})
54. \}).catch(() => \{
55. /\*\*
56. \* 点击了取消按钮
57. \*/
58. \})
59. \} else \{
60. return false
61. \}
62. \})
63. \}
64. \}
65. \}