editAddress.vue 1.7 KB

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