验证

TIP

1.0.0+

普通用法

验证 - 图1

配置验证字段的rules的数据对象即可,具体参考elementform表单校验的配置规则官方规则

  1. <avue-crud :data="data" :option="option" @row-save="rowSave" @row-update="rowUpdate"></avue-crud>
  2. <script>
  3. export default {
  4. data() {
  5. return {
  6. data: [
  7. {
  8. name:'张三',
  9. sex:'男'
  10. }, {
  11. name:'李四',
  12. sex:'女'
  13. }
  14. ],
  15. option:{
  16. page:false,
  17. align:'center',
  18. menuAlign:'center',
  19. column:[
  20. {
  21. label:'姓名',
  22. prop:'name',
  23. rules: [{
  24. required: true,
  25. message: "请输入姓名",
  26. trigger: "blur"
  27. }]
  28. }, {
  29. label:'性别',
  30. prop:'sex',
  31. rules: [{
  32. required: true,
  33. message: "请输入性别",
  34. trigger: "blur"
  35. }]
  36. }
  37. ]
  38. },
  39. };
  40. },
  41. methods: {
  42. rowSave(form,done){
  43. this.$message.success('新增数据'+ JSON.stringify(form));
  44. done();
  45. }
  46. rowUpdate(form,index,done){
  47. this.$message.success('编辑数据'+ JSON.stringify(form)+'数据序号'+index);
  48. done();
  49. },
  50. }
  51. }
  52. </script>

自定义验证

验证 - 图2

  1. <avue-crud :data="data" v-model="obj" :option="option1" @row-save="rowSave" @row-update="rowUpdate"></avue-crud>
  2. <script>
  3. export default {
  4. data() {
  5. var validatePass = (rule, value, callback) => {
  6. if (value === '') {
  7. callback(new Error('请输入密码'));
  8. } else {
  9. callback();
  10. }
  11. };
  12. var validatePass2 = (rule, value, callback) => {
  13. if (value === '') {
  14. callback(new Error('请再次输入密码'));
  15. } else if (value !== this.obj.password) {
  16. callback(new Error('两次输入密码不一致!'));
  17. } else {
  18. callback();
  19. }
  20. };
  21. return {
  22. obj:{},
  23. data: [
  24. {
  25. name:'张三',
  26. sex:'男'
  27. }, {
  28. name:'李四',
  29. sex:'女'
  30. }
  31. ],
  32. option0:{
  33. page:false,
  34. align:'center',
  35. menuAlign:'center',
  36. column:[
  37. {
  38. label:'姓名',
  39. prop:'name',
  40. rules: [{
  41. required: true,
  42. message: "请输入姓名",
  43. trigger: "blur"
  44. }]
  45. }, {
  46. label:'性别',
  47. prop:'sex',
  48. rules: [{
  49. required: true,
  50. message: "请输入性别",
  51. trigger: "blur"
  52. }]
  53. }
  54. ]
  55. }, {
  56. label:'密码',
  57. prop:'password',
  58. hide:true,
  59. rules: [{ validator: validatePass, trigger: 'blur' }]
  60. }, {
  61. label:'确认密码',
  62. prop:'oldpassword',
  63. hide:true,
  64. rules: [{ validator: validatePass2, trigger: 'blur' }]
  65. }
  66. };
  67. },
  68. methods: {
  69. rowSave(form,done){
  70. this.$message.success('新增数据'+ JSON.stringify(form));
  71. done();
  72. }
  73. rowUpdate(form,index,done){
  74. this.$message.success('编辑数据'+ JSON.stringify(form)+'数据序号'+index);
  75. done();
  76. },
  77. }
  78. }
  79. </script>