Vue+Elenment+LayUI 修改用户密码

需求：基于Element-UI和LayUI搭建的后台管理系统，除了有权限的管理员手动修改所有人的用户密码以外，需要添加一个自己能修改密码的功能。

效果图
1：添加修改密码

2：点击修改密码弹出el-dialog弹框

附上代码

1：首先是弹出框的代码

 <el-dialog
      :title="dialogParamsU.title"
      :visible.sync="dialogParamsU.visible"
      :close-on-click-modal="false"
      custom-class="el-dialog--width360">
	       <el-form :model="dataU = data01.Content" :rules="dialogParamsU.rules" ref="dataU">
	       	<el-form-item label="用户编号" prop="UserCode" :label-width="dialogParamsU.formLabelWidth">
	          <el-input v-model="dataU.UserCode" :disabled="true" placeholder="" auto-complete="off"></el-input>
	        </el-form-item>
	        <el-form-item label="原密码" prop="OldPassword" :label-width="dialogParamsU.formLabelWidth">
	          <el-input v-model="dataU.OldPassword"  placeholder="请输入原密码" auto-complete="off"></el-input>
	        </el-form-item>
	        <el-form-item label="新密码" prop="NewPassword" :label-width="dialogParamsU.formLabelWidth">
	          <el-input v-model="dataU.NewPassword" placeholder="请输入新密码" auto-complete="off"></el-input>
	        </el-form-item>
	        <el-form-item label="确认密码" prop="NewPassword2" :label-width="dialogParamsU.formLabelWidth">
	          <el-input v-model="dataU.NewPassword2" placeholder="请再次输入新密码" auto-complete="off"></el-input>
	        </el-form-item>
	      </el-form>
	      <span slot="footer" class="dialog-footer">
        	<el-button type="success" @click.native.prevent="onSubmit('dataU')"  style="margin-left:-50px;">修改密码</el-button>
      	  </span>   
    </el-dialog>

2：Vue.JS代码

<script>
	export default {
		name: 'VHeader',
		data() {
			//此处添加表单发送之前的验证
			
			//声明validateNewPassword变量验证首次输入的新密码
			var validateNewPassword = (rule, value, callback) => {
				if(!value) {
					callback(new Error("请输入新密码"));
				} else if(value.toString().length < 6 || value.toString().length > 18) {
					callback(new Error("密码长度为6-18位"));
				} else {
					callback();
				}
			};
			
			//声明validateNewPassword2验证再次输入的新密码，并与首次输入的新密码做比较
			var validateNewPassword2 = (rule, value, callback) => {
				if(value === "") {
					callback(new Error("请再次输入密码"));
				} else if(value !== this.data01.Content.NewPassword) {
					callback(new Error("两次输入密码不一致!"));
				} else {
					callback();
				}
			};
			return {
				UserCode: global.MS.UserCode,
				data01: { // 点击保存提交数据给后台
					Content: {
						UserCode: global.MS.UserCode,
						OldPassword: '',
						NewPassword: '',
					},
					Method: ''
				},

				//弹出框标题，大小控制，以及验证每个input框
				dialogParamsU: {
					title: '修改密码',
					visible: false,
					formLabelWidth: '85px',
					rules: {
						//验证旧密码
						OldPassword: [{
							required: true,
							message: '请输入原密码',
							trigger: 'blur'
						}],
						//验证新密码
						NewPassword: [{
							required: true,
							validator: validateNewPassword,
							trigger: 'blur'
						}],
						//验证再次输入的新密码
						NewPassword2: [{
							required: true,
							validator: validateNewPassword2,
							trigger: 'blur'
						}]

					}
				},
				isShow: false
			}
		},
		methods: {
			//点击修改密码弹出框显示
			changePassword() {
				this.dialogParamsU.visible = true
			},
			//添加保存提交表单
			onSubmit() {
				this.$refs.dataU.validate(valid => {
					if(valid) {
						this.$axios({
							method: 'post',
							url: global.MDM + '/MDM0001', //接口地址，不做参考，请根据实际接口地址书写即可
							data: this.data01           //点击保存以后提交的数据
						}).then((res) => {
							if(res.data.Status === 200) {
								this.$notify({
									title: '修改成功',
									message: '您的账户密码已修改成功,5秒后跳转到登录页',
									type: 'success'
								})
								this.dialogParamsU.visible = false		//修改成功以后关闭当前弹出框
								setTimeout(() => {
									this.$router.push('/login')         //修改成功以后跳转到登录页
								}, 5000);
							} else {
								this.$notify.warning({
									title: '修改失败',
									message: '您的修改密码失败，请输入正确的原密码'
								})
							}
						})
						} else {
							return false
						}
				})
			},

		}

	}
</script>

总结：细心是很重要的，希望多多指教