element-ui中表单验证rules

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

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

<template>

    <div class="short-visit">

      <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>

    </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. }