基于element插件的表单验证及重置

<template><div class="login"><div class="login_box"><!-- 表单 --><el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef"><!-- 2行表单输入框 --><el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input></el-form-item><el-form-item prop="password"> <el-input v-model="loginForm.password" type="password" prefix-icon="el-icon-lock"></el-input></el-form-item><!-- 按钮 --><el-form-item class="btns"><el-button type="primary">登陆</el-button><el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item></el-form></div></div>
</template><script>
export default {data () {return {loginForm: {username: '',password: ''},loginFormRules: {username: [{ required: true, message: '请输入登陆账号', trigger: 'blur' },{ min: 3, max: 10, message: '长度在3-10个字符',trigger: 'blur' }],password: [{ required: true, message: '请输入登陆密码', trigger: 'blur' },{ min: 6, max: 15, message: '长度在6-15个字符',trigger: 'blur' }]}}},methods: {resetLoginForm () {this.$refs.loginFormRef.resetFields()}}
}
</script>

1.表单数据对象绑定

2.表单输入框内容双向绑定

3.表单密码输入框内容显示为圆点

4.表单绑定验证规则

5.表单输入框绑定验证规则

6.表单登陆规则设置

7.表单重置

基于element插件的表单验证及重置相关推荐

自己编写jQuery插件之表单验证
自己编写jQuery插件之表单验证吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...
Jquery中使用Validate插件使表单验证更加简单
场景效果介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 UR ...
html表单判断字符数,JS判断字符串长度，结合element el-input el-form 表单验证（英文占1个字符，中文汉字占2个字符）...
首先看看判断字符串长度的几种方法(英文占1个字符,中文汉字占2个字符) 方法一: function strlen(str) { var len = 0; for (var i = 0; i < ...
html中表单的校验的插件,jquery表单验证插件validationEngine
插件的特色: 封装强悍.例子充足(基本都验证类型都被囊括).调用轻便注意事项: 1.演示版本为 v2.2.4: 2.v2.0 以下的版本参数并不完全通用: 对 validationEngine.jq ...
jQuery 插件 Validation表单验证使用步骤（详细的）
之前一直专注于做公司的OA系统,很久没有好好学习了,,,, 下面就开始讲这个插件的使用步骤 1.现在界面引入插件 <script src="jquery.js">< ...
基于角色(Role-Based)的表单验证
要求: using System.Web.Security using System.Security.Principal [Principal]:主要的(这里怎样翻译呢??) =========== ...
Element UI自定义表单验证公共提取
2019独角兽企业重金招聘Python工程师标准>>> 主要代码: util文件夹下validate.js 文件 export const VDT = {messages:{requ ...
element的复杂表单验证
rentSpaceBuildId: [{ required: true,validator:(rule, value, callback)=>{if ((this.form.rentSpaceT ...
element中form表单resetFields()方法重置表单无效
官方文档 // 调用resetFields但没有生效 resetForm() {this.$refs['form'].resetFields(); } 解决: form里需要ref 表单项el-for ...
vue表单验证，重置
<template><div class="all"><div class="content"><el-form :m ...

基于element插件的表单验证及重置

1.表单数据对象绑定

2.表单输入框内容双向绑定

3.表单密码输入框内容显示为圆点

4.表单绑定验证规则

5.表单输入框绑定验证规则

6.表单登陆规则设置

7.表单重置

基于element插件的表单验证及重置相关推荐

最新文章

热门文章