form.nvue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  1. <template>
  2. <view class="u-page">
  3. <u-navbar
  4. title="表单"
  5. @leftClick="navigateBack"
  6. safeAreaInsetTop
  7. fixed
  8. placeholder
  9. ></u-navbar>
  10. <view class="u-demo-block">
  11. <text class="u-demo-block__title">基础使用</text>
  12. <view class="u-demo-block__content">
  13. <!-- 注意,如果需要兼容微信小程序,最好通过setRules方法设置rules规则 -->
  14. <u--form
  15. labelPosition="left"
  16. :model="model1"
  17. ref="form1"
  18. >
  19. <u-form-item
  20. label="姓名"
  21. prop="userInfo.name"
  22. borderBottom
  23. ref="item1"
  24. >
  25. <u--input
  26. v-model="model1.userInfo.name"
  27. border="none"
  28. placeholder="姓名,只能为中文"
  29. ></u--input>
  30. </u-form-item>
  31. <u-form-item
  32. label="性别"
  33. prop="userInfo.sex"
  34. borderBottom
  35. @click="showSex = true; hideKeyboard()"
  36. ref="item1"
  37. >
  38. <u--input
  39. v-model="model1.userInfo.sex"
  40. disabled
  41. disabledColor="#ffffff"
  42. placeholder="请选择性别"
  43. border="none"
  44. ></u--input>
  45. <u-icon
  46. slot="right"
  47. name="arrow-right"
  48. ></u-icon>
  49. </u-form-item>
  50. <u-form-item
  51. label="水果"
  52. prop="radiovalue1"
  53. borderBottom
  54. ref="item2"
  55. >
  56. <u-radio-group v-model="model1.radiovalue1">
  57. <u-radio
  58. :customStyle="{marginRight: '16px'}"
  59. v-for="(item, index) in radiolist1"
  60. :key="index"
  61. :label="item.name"
  62. :name="item.name"
  63. >
  64. </u-radio>
  65. </u-radio-group>
  66. </u-form-item>
  67. <u-form-item
  68. label="兴趣爱好"
  69. prop="checkboxValue1"
  70. borderBottom
  71. labelWidth="80"
  72. ref="item3"
  73. >
  74. <u-checkbox-group
  75. v-model="model1.checkboxValue1"
  76. shape="square"
  77. @change="change"
  78. >
  79. <u-checkbox
  80. :customStyle="{marginRight: '16px'}"
  81. v-for="(item, index) in checkboxList1"
  82. :key="index"
  83. :label="item.name"
  84. :name="item.name"
  85. >
  86. </u-checkbox>
  87. </u-checkbox-group>
  88. </u-form-item>
  89. <u-form-item
  90. label="简介"
  91. prop="intro"
  92. borderBottom
  93. ref="item3"
  94. >
  95. <u--textarea
  96. placeholder="不低于3个字"
  97. v-model="model1.intro"
  98. count
  99. ></u--textarea>
  100. </u-form-item>
  101. <u-form-item
  102. label="住店时间"
  103. prop="hotel"
  104. labelWidth="80"
  105. borderBottom
  106. @click="showCalendar = true; hideKeyboard()"
  107. >
  108. <u--input
  109. v-model="model1.hotel"
  110. disabled
  111. disabledColor="#ffffff"
  112. placeholder="请选择住店和离店时间"
  113. border="none"
  114. ></u--input>
  115. <u-icon
  116. slot="right"
  117. name="arrow-right"
  118. ></u-icon>
  119. </u-form-item>
  120. <u-form-item
  121. label="验证码"
  122. prop="code"
  123. labelWidth="80"
  124. borderBottom
  125. >
  126. <u--input
  127. v-model="model1.code"
  128. border="none"
  129. placeholder="请填写验证码"
  130. ></u--input>
  131. <u-button
  132. slot="right"
  133. @tap="getCode"
  134. :text="tips"
  135. type="success"
  136. size="mini"
  137. :disabled="disabled1"
  138. ></u-button>
  139. </u-form-item>
  140. <u-form-item
  141. label="生日"
  142. prop="userInfo.birthday"
  143. borderBottom
  144. @click="showBirthday = true; hideKeyboard()"
  145. ref="item1"
  146. >
  147. <u--input
  148. v-model="model1.userInfo.birthday"
  149. disabled
  150. disabledColor="#ffffff"
  151. placeholder="请选择生日"
  152. border="none"
  153. ></u--input>
  154. <u-icon
  155. slot="right"
  156. name="arrow-right"
  157. ></u-icon>
  158. </u-form-item>
  159. </u--form>
  160. <u-button
  161. type="primary"
  162. text="提交"
  163. customStyle="margin-top: 50px"
  164. @click="submit"
  165. ></u-button>
  166. <u-button
  167. type="error"
  168. text="重置"
  169. customStyle="margin-top: 10px"
  170. @click="reset"
  171. ></u-button>
  172. <u-action-sheet
  173. :show="showSex"
  174. :actions="actions"
  175. title="请选择性别"
  176. description="如果选择保密会报错"
  177. @close="showSex = false"
  178. @select="sexSelect"
  179. >
  180. </u-action-sheet>
  181. <u-calendar
  182. :show="showCalendar"
  183. mode="range"
  184. @confirm="calendarConfirm"
  185. @close="calendarClose"
  186. startText="住店"
  187. endText="离店"
  188. confirmDisabledText="请选择离店日期"
  189. :formatter="formatter"
  190. ></u-calendar>
  191. <u-code
  192. ref="uCode"
  193. @change="codeChange"
  194. seconds="20"
  195. @start="disabled1 = true"
  196. @end="disabled1 = false"
  197. ></u-code>
  198. <u-datetime-picker
  199. :show="showBirthday"
  200. :value="birthday"
  201. mode="date"
  202. closeOnClickOverlay
  203. @confirm="birthdayConfirm"
  204. @cancel="birthdayClose"
  205. @close="birthdayClose"
  206. ></u-datetime-picker>
  207. </view>
  208. </view>
  209. </view>
  210. </template>
  211. <script>
  212. export default {
  213. data() {
  214. return {
  215. fileList1: [],
  216. disabled1: false,
  217. tips: '',
  218. value: '',
  219. showCalendar: false,
  220. showBirthday: false,
  221. model1: {
  222. userInfo: {
  223. name: '楼兰',
  224. sex: '',
  225. birthday: ''
  226. },
  227. radiovalue1: '苹果',
  228. checkboxValue1: [],
  229. intro: '',
  230. code: ''
  231. },
  232. showSex: false,
  233. birthday: Number(new Date()),
  234. actions: [{
  235. name: '男',
  236. },
  237. {
  238. name: '女',
  239. },
  240. {
  241. name: '保密',
  242. },
  243. ],
  244. rules: {
  245. 'userInfo.name': [{
  246. type: 'string',
  247. required: true,
  248. message: '请填写姓名',
  249. trigger: ['blur', 'change']
  250. }, {
  251. // 此为同步验证,可以直接返回true或者false,如果是异步验证,稍微不同,见下方说明
  252. validator: (rule, value, callback) => {
  253. // 调用uView自带的js验证规则,详见:https://www.uviewui.com/js/test.html
  254. return uni.$u.test.chinese(value);
  255. },
  256. message: "姓名必须为中文",
  257. // 触发器可以同时用blur和change,二者之间用英文逗号隔开
  258. trigger: ["change", "blur"],
  259. }],
  260. code: {
  261. type: 'string',
  262. required: true,
  263. len: 4,
  264. message: '请填写4位验证码',
  265. trigger: ['blur']
  266. },
  267. 'userInfo.sex': {
  268. type: 'string',
  269. max: 1,
  270. required: true,
  271. message: '请选择男或女',
  272. trigger: ['blur', 'change']
  273. },
  274. radiovalue1: {
  275. type: 'string',
  276. min: 1,
  277. max: 2,
  278. message: '橙子有毒',
  279. trigger: ['change']
  280. },
  281. checkboxValue1: {
  282. type: 'array',
  283. min: 2,
  284. required: true,
  285. message: '不能太宅,至少选两项',
  286. trigger: ['change']
  287. },
  288. intro: {
  289. type: 'string',
  290. min: 3,
  291. required: true,
  292. message: '不低于3个字',
  293. trigger: ['change']
  294. },
  295. hotel: {
  296. type: 'string',
  297. min: 2,
  298. required: true,
  299. message: '请选择住店时间',
  300. trigger: ['change']
  301. },
  302. 'userInfo.birthday': {
  303. type: 'string',
  304. required: true,
  305. message: '请选择生日',
  306. trigger: ['change']
  307. },
  308. },
  309. radiolist1: [{
  310. name: '苹果',
  311. disabled: false
  312. },
  313. {
  314. name: '香蕉',
  315. disabled: false
  316. },
  317. {
  318. name: '毒橙子',
  319. disabled: false
  320. }
  321. ],
  322. checkboxList1: [{
  323. name: '羽毛球',
  324. disabled: false
  325. },
  326. {
  327. name: '跑步',
  328. disabled: false
  329. },
  330. {
  331. name: '爬山',
  332. disabled: false
  333. }
  334. ]
  335. }
  336. },
  337. onReady() {
  338. // 如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则
  339. this.$refs.form1.setRules(this.rules)
  340. },
  341. methods: {
  342. afterRead(event) {
  343. this.fileList1.push({
  344. url: event.file,
  345. status: 'uploading',
  346. message: '上传中'
  347. })
  348. },
  349. groupChange(n) {
  350. // console.log('groupChange', n);
  351. },
  352. radioChange(n) {
  353. // console.log('radioChange', n);
  354. },
  355. navigateBack() {
  356. uni.navigateBack()
  357. },
  358. sexSelect(e) {
  359. this.model1.userInfo.sex = e.name
  360. this.$refs.form1.validateField('userInfo.sex')
  361. },
  362. change(e) {
  363. // console.log(e);
  364. },
  365. formatter(day) {
  366. const d = new Date()
  367. let month = d.getMonth() + 1
  368. const date = d.getDate()
  369. if (day.month == month && day.day == date + 3) {
  370. day.bottomInfo = '有优惠'
  371. day.dot = true
  372. }
  373. return day
  374. },
  375. calendarConfirm(e) {
  376. this.showCalendar = false
  377. this.model1.hotel = `${e[0]} / ${e[e.length - 1]}`
  378. this.$refs.form1.validateField('hotel')
  379. },
  380. codeChange(text) {
  381. this.tips = text;
  382. },
  383. getCode() {
  384. if (this.$refs.uCode.canGetCode) {
  385. // 模拟向后端请求验证码
  386. uni.showLoading({
  387. title: '正在获取验证码'
  388. })
  389. setTimeout(() => {
  390. uni.hideLoading();
  391. // 这里此提示会被this.start()方法中的提示覆盖
  392. uni.$u.toast('验证码已发送');
  393. // 通知验证码组件内部开始倒计时
  394. this.$refs.uCode.start();
  395. }, 2000);
  396. } else {
  397. uni.$u.toast('倒计时结束后再发送');
  398. }
  399. },
  400. calendarClose() {
  401. this.showCalendar = false
  402. this.$refs.form1.validateField('hotel')
  403. },
  404. birthdayClose() {
  405. this.showBirthday = false
  406. this.$refs.form1.validateField('userInfo.birthday')
  407. },
  408. birthdayConfirm(e) {
  409. this.showBirthday = false
  410. this.model1.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
  411. this.$refs.form1.validateField('userInfo.birthday')
  412. },
  413. submit() {
  414. // 如果有错误,会在catch中返回报错信息数组,校验通过则在then中返回true
  415. this.$refs.form1.validate().then(res => {
  416. uni.$u.toast('校验通过')
  417. }).catch(errors => {
  418. uni.$u.toast('校验失败')
  419. })
  420. },
  421. reset() {
  422. const validateList = ['userInfo.name', 'userInfo.sex', 'radiovalue1', 'checkboxValue1', 'intro',
  423. 'hotel', 'code', 'userInfo.birthday']
  424. this.$refs.form1.resetFields()
  425. this.$refs.form1.clearValidate()
  426. setTimeout(()=>{
  427. this.$refs.form1.clearValidate(validateList)
  428. // 或者使用 this.$refs.form1.clearValidate()
  429. },10)
  430. },
  431. hideKeyboard() {
  432. uni.hideKeyboard()
  433. }
  434. },
  435. }
  436. </script>
  437. <style lang="scss">
  438. </style>