element----form使用
关于Element-UI中form表单的基本使用。
一、Element-UI是什么?
Element-ui是一个基于Vue2.0的组件库,里面有一些现成的组件便于我们提高写代码的成本
二、form表单使用步骤
1.挑选一个接近自己要使用的表单CV
代码如下(示例):
<el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
<el-form-item label="手机号" prop="mobile">
<el-input type="number" placeholder="请输入手机号" v-model="form.mobile" autocomplete="on"></el-input>
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input
:key="passwordType"
ref="password"
v-model="form.password"
:type="passwordType"
placeholder="请输入密码"
name="password"
tabindex="2"
auto-complete="on"
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
<svg-icon
:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
/>
</span>
</el-form-item>
<el-form-item>
<el-button
class="loginBtn"
:loading="loading"
type="primary"
style="width: 100%; margin-bottom: 30px"
@click.native.prevent="LoginFn"
>
登陆</el-button>
</el-form-item>
</el-form>
2.data
代码如下(示例):
data() {
const validmobile = (rule, value, callback) => { // 验证手机号
if (!validMobile(value)) {
callback(new Error('请输入正确的手机号'))
} else {
callback()
}
}
const validatePassword = (rule, value, callback) => { // 验证码
if (value.length < 6) {
callback(new Error('请输入正确的验证码'))
} else {
callback()
}
}
return {
form: { // 表单
mobile: '13800000000',//手机号
password: '123456'//验证码
},
rules: { // 规则
mobile: [
{ required: true, trigger: 'blur', validator: validmobile }
],
password: [
{ required: true, trigger: 'blur', validator: validatePassword }
]
},
loading: false,//控制小圆圈
passwordType: 'password'
}
},
methods: {
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.passwordType = 'password'
}
this.$nextTick(() => {
this.$refs.password.focus()
})
},
LoginFn(){
this.$refs.loginForm.validate(
async(valid) => {
// console.log(valid)
// valid是输入账号密码是否通过正则的结果 是布尔值
valid ? 通过验证规则走这里 : 没通过
}
}
)
}
}
这里只是随便写的校验规则,如果有其他想校验可以用pattern添加正则继续校验
- el-form中的model 属性:为表单绑定数组对象
- el-form的rules属性:配置验证规则
- 给需要验证的每一个 el-form-item 绑定 prop 属性
- prop值 , 表单数据中的属性名,rules中的属性名要一致
- validate方法是表单组件自带的,用来对表单内容进行检验
- ref 的作用主要用来获取表单组件手动触发验证
注意:rules中的属性名与表单数据项中的属性名是一致的