Form form of the uniapp uview framework, input the verification mobile number and verification micro signal

  effect

  Code implementation

<u-form :model="form" ref="form">
	<u-form-item label-width="150" label=" contact number " prop="contactNumber"><u-input v-model="form.contactNumber" placeholder=" Please enter the contact number " maxlength="11" /></u-form-item>
	<u-form-item label-width="150" label=" WeChat ID " prop="wxAccount"><u-input v-model="form.wxAccount" placeholder=" Please input the micro signal " /></u-form-item>
</u-form>

  The micro signal is only verified with or without Chinese

<script>
import api from '@/api/api.js';
export default {
	data() {
		return {
			form: {},
			rules: {
				//  cell-phone number 
				contactNumber: [
					{
						required: false,
					},
					{
						//  Custom validation functions 
						validator: (rule, value, callback) => {
							//  return true Indicates that the verification is passed , return false Say no 
                            //  Filter the first layer , First judge that the input is not empty , because required: false, Not required , So if it is empty, it should return true
							if(value) {
								return this.$u.test.mobile(value);
							} else {
								return true
							}
						},
						message: ' The mobile number is incorrect ',
						//  Triggers can be used simultaneously blur and change
						trigger: ['change','blur'],
					}
				],
				//  WeChat ID 
				wxAccount: [
					{
						required: false,
					},
					{
						//  Custom validation functions 
						validator: (rule, value, callback) => {
							//  return true Indicates that the verification is passed , return false Say no 
							if(value) {
								let i = 0;
                                //  Cycle to check whether each character is Chinese 
								for(i=0;i<value.length;i++) {
									if(this.$u.test.chinese(value[i])) {
										return false;
									}
								}
								return true;
							} else {
								return true
							}
						},
						message: ' Please do not enter Chinese characters ',
						//  Triggers can be used simultaneously blur and change
						trigger: ['change','blur'],
					}
				]
			}
		};
	},
	methods: {
		handleSubmit() {
			const that = this;
			const params = {
				wxAccount: this.form.wxAccount,
				contactNumber: this.form.contactNumber
			};
            //  Form start verification 
			this.$refs.form.validate(valid => {
                //  by true, To perform the next operation , by false, Will show rules Inside message
				if (valid) {
					api.shopUpdate(params).then(res => {
						if (res.code === '00000') {
							uni.showModal({
								title: ' Tips ',
								content: ' Modification successful ',
								showCancel: false,
								success() {
									that.getInfo();
								}
							});
						}
					});
				}
			});
		},
	},
	onShow() {
	},
	onReady() {
        //  Form setting verification rules 
		this.$refs.form.setRules(this.rules);
	}
};
</script>