vue 表单验证两次密码是否一致

template：

<template><div class="logon_home"><div class="logon_bg"><div class='logon'><div class="password"><div class="title"><h2 class="hd">无组织排放管理监控平台</h2><p class="bd">当前账号：<span class="tel">136-1234-5678</span> 使用的为初始密码 为了保障安全，请重新设置个人密码</p></div><!-- 登录表单区域 --><el-form class="passnum" ref="logonForm" :model="logonForm" :rules='logonFormrules' label-width="90px"><el-form-item prop="pass"><el-input v-model='logonForm.pass' placeholder="新密码"></el-input></el-form-item><el-form-item prop="pwd"><el-input type="password" v-model='logonForm.pwd' placeholder="确认密码"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('logonForm')">确认</el-button></el-form-item></el-form> </div></div></div></div>
</template>

script：

<script>
export default ({name:'Logon',components:{ Head },data(){var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (this.logonForm.pwd !== '') {this.$refs.logonForm.validateField('pwd');}callback();}};var validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== this.logonForm.pass) {callback(new Error('两次输入密码不一致!'));} else {callback();}};return{logonForm: {app_sid: '',pwd: '',pass: '',},// 这是表单规则验证对象logonFormrules: {pass: [{ validator: validatePass, trigger: 'blur' }],pwd: [{ validator: validatePass2, trigger: 'blur' }],}}},created(){ },mounted(){ },methods:{// 确认提交按钮submitForm(forName){this.$refs[forName].validate((valid) => {if (valid) {alert('submit!');} else {alert('error submit!!');return false;}});// this.logonForm.app_sid = sessionStorage.getItem('app_sid')// this.$refs.logonFormRef.validate(async valid => {//     console.log(valid)//     if (!valid) return//     this.$http.post('/admin/admin_pwd', this.logonForm).then(res=>{//         if ( res.data.code !== 200) return this.$message.error("密码修改失败");//         this.$message.success("密码修改成功")//         this.$router.push('/account')//     })// })}},watch:{}
})
</script>

style：

<style lang='scss' scoped>
.logon_bg{width: 100vw;height: 93vh;display: flex;align-items: center;justify-content: center;background: url('../../src/static/logon.png') no-repeat;background-size: 100% 100%;.logon{width: 55vw;height: 59vh;display: flex;justify-content: flex-end;align-items: center;background: url('../../src/static/logon_bg.png') no-repeat;background-size: 100% 100%;.password{width: 27vw;height: 48vh;.passnum{width: 21vw;height: 30vh;>>>.el-input__inner{height: 5.5vh;color: #feffff;}>>>.el-button{height: 5.5vh;width: 16vw;margin-top: 8vh;}}.title{width: 24vw;height: 15vh;color: #feffff;text-align: center;.hd{font-size: 1.8vw;font-weight: 700;color: #feffff;}.bd{width: 24vw;padding: 0 2vw;box-sizing: border-box;}.tel{color: #03d4d9;}}}}
}
</style>

http:https://element.eleme.cn/#/zh-CN/component/form#form-item-methods

vue 表单验证两次密码是否一致相关推荐

vue表单验证(用户名、密码、身份证号、中文姓名、手机号、邮箱)
vue表单验证(用户名.密码.身份证号.中文姓名.手机号.邮箱) new Vue({el: '#register',data: function() {// 验证邮箱let checkEmail = ...
vue表单验证插件 vuerify
表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会非常的复杂,尤其对于大量表单验证更是如此. 当然有一些jQuery 表单验证的插件,或许用着还不错.但是,如果你不想在v ...
写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求目标:简单易用可扩展如何简单开发者要做的写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
Vue 表单验证插件的写作过程
前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. ...
vue表单验证，多种校验规则
前言 vue 表单验证,具体的大家根据自身项目和框架来,本文以antd举例. 实现这里以antd 举例 <template><a-form-model ref="rule ...
vue 表单验证按钮事件交由父组件触发
vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法子组件: //内容部分 <Form ref="formCustom" :model="formC ...
vue表单验证，不能通过验证
vue表单验证一直不能通过 1.model里的值一定要和 js里面data的名称(formValidate)对应 2.rules里面的值要和js里面设定的表单规则(ruleValidate)对应 3. ...
Vue 表单验证、数据验证
graceUI js 模块 graceUI 官网 http://grace.hcoder.net 首页视频教程第一节可观看组件演示 (: 使用说明 1 将 graceChecker.js 部署到您的项 ...
vue 表单验证并提交
vue 表单验证并提交一.常用验证方式 1.data 中验证 data 数据: 2.行内验证 3.引入外部定义的规则二.表单提交时验证 1.表单的提交按钮 2.ethods 方法一.常用验证方式 ...

vue 表单验证两次密码是否一致

vue 表单验证两次密码是否一致相关推荐

最新文章

热门文章