ValidatorTest.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <div id="app">
  3. <fieldset>
  4. <legend>Dynamic validation with string (Working as expected)</legend>
  5. <input v-model="text" v-validate="rule('1')" autocomplete="off" type="text" :name="name1" />
  6. <span v-show="errors.has(name1)">{{ errors.first(name1) }}</span>
  7. <label>
  8. <input v-model="required" autocomplete="off" type="checkbox" />{{ required ? "" : "Not" }}
  9. Required
  10. </label>
  11. </fieldset>
  12. <fieldset>
  13. <legend>Dynamic validation with object (Working with issue)</legend>
  14. <input
  15. v-model="textObj"
  16. v-validate="ruleObj"
  17. autocomplete="off"
  18. type="text"
  19. name="inputObj"
  20. />
  21. <span v-show="errors.has('inputObj')">{{
  22. errors.first("inputObj")
  23. }}</span>
  24. <label>
  25. <input v-model="ruleObj.rules.required" autocomplete="off" type="checkbox" />{{
  26. ruleObj.rules.required ? "" : "Not"
  27. }}
  28. Required
  29. </label>
  30. </fieldset>
  31. </div>
  32. </template>
  33. <script>
  34. export default {
  35. data: function () {
  36. return {
  37. name1: 'name11',
  38. text: '',
  39. required: true,
  40. textObj: '',
  41. ruleObj: {
  42. rules: {
  43. required: true,
  44. },
  45. arg: 'textObj',
  46. },
  47. };
  48. },
  49. methods: {
  50. rule: function (value) {
  51. console.log(value);
  52. return this.required ? 'required' : '';
  53. },
  54. },
  55. };
  56. </script>