uniapp-test/pages/center/mmxg/mmxg.vue

<template>
	<view>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="model" :rules="rules" ref="form1">
			<div style="display:none;">
			<u-form-item label="新密码" label-width="150" prop="userid">
				<u-input :password-icon="true"  type="password" v-model="model.userid" placeholder="请输入密码"></u-input>
			</u-form-item>
			</div>
			<u-form-item label="新密码:" prop="password" borderBottom ref="item1" label-width="150">
				<u--input v-model="model.password" border="none" placeholder="请输入密码"></u--input>
			</u-form-item>
			<u-form-item label="重复密码:" prop="repassword" borderBottom ref="item1" label-width="150">
				<u--input v-model="model.repassword" border="none" placeholder="请输入密码"></u--input>
			</u-form-item>
			
		</u--form>
		<br>
		<u-button @click="submit">提交</u-button>
		
		
	</view>

</template>

<script>
	import {loginRes1} from '@/config/api.js';
	export default {
		data() {
			return {
				model: {
					userid:'',	
				},
				rules: {
					'password': [
					{
						required: true,
						message: '请输入密码',
						trigger: ['change','blur'],
					},
					{
						// 正则不能含有两边的引号
						pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
						message: '需同时含有字母和数字，长度在6-12之间',
						trigger: ['change','blur'],
					}
				],
					'repassword': [
						{
							required: true,
							message: '请重新输入密码',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.model.password;
							},
							message: '两次输入的密码不相等',
							trigger: ['change','blur'],
						}
					],
					
				},

				switchVal: false
			};
		},
		methods: {
			// 隐藏键盘
			hideKeyboard() {
				uni.hideKeyboard()
			},
			
			
			submit() {
				this.$refs.form1.validate().then(res => {
					console.log("提交表单信息:" + JSON.stringify(this.model.password))
					// uni.$u.toast('校验通过')
					// 调用服务端入表接口
					//处理登录用的参数
					const params={
						id:this.model.userid,
						password:this.model.password,
					}
					this.tjxg(params)
					// const res= await loginRes(params)
					// console.log(params)
				}).catch(errors => {
					// console.log("失败信息:" + JSON.stringify(errors))
					 uni.$u.toast('校验失败')
				})
			},
			async tjxg(params){
				const res= await loginRes1(params)
				console.log(res)
				
			}
			
		},
		async onLoad() {
			if(!this.$u.utils.isLogin()) return
		
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		}

	};
</script>

<style lang="scss">

</style>