editAddress.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <template>
  2. <view class="content">
  3. <u-form :model="form" ref="uForm" :error-type="['toast']">
  4. <u-form-item label="姓名" required prop="name">
  5. <u-input placeholder="请输入姓名" v-model="form.name" />
  6. </u-form-item>
  7. <u-form-item label="电话" required prop="mobile">
  8. <u-input placeholder="请输入电话" type="number" v-model="form.mobile" />
  9. </u-form-item>
  10. <u-form-item label="地址" required prop="address">
  11. <u-input placeholder="请输入收货地址(省+市+区+详细地址)" v-model="form.address" />
  12. </u-form-item>
  13. </u-form>
  14. <view class="buttons">
  15. <u-button type="primary" @click="submit">提交</u-button>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. form: {
  24. name: '',
  25. mobile: '',
  26. address: ''
  27. },
  28. rules: {
  29. name: [
  30. {
  31. required: true,
  32. message: '请输入姓名',
  33. // 可以单个或者同时写两个触发验证方式
  34. trigger: ['change','blur'],
  35. }
  36. ],
  37. mobile: [
  38. {
  39. required: true,
  40. message: '请输入电话',
  41. // 可以单个或者同时写两个触发验证方式
  42. trigger: ['change','blur'],
  43. }
  44. ],
  45. address: [
  46. {
  47. required: true,
  48. min: 100,
  49. message: '地址不能少于100个字',
  50. trigger: ['change','blur']
  51. }
  52. ]
  53. }
  54. };
  55. },
  56. methods: {
  57. submit() {
  58. this.$refs.uForm.validate(valid => {
  59. if (valid) {
  60. console.log('验证通过');
  61. } else {
  62. console.log('验证失败');
  63. }
  64. });
  65. }
  66. },
  67. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  68. onReady() {
  69. this.$refs.uForm.setRules(this.rules);
  70. }
  71. };
  72. </script>
  73. <style lang="scss">
  74. .content{
  75. padding: 0 50upx;
  76. background: #FFFFFF;
  77. width: 100%;
  78. .buttons{
  79. padding: 80upx 100upx;
  80. }
  81. }
  82. </style>