Vue + ElementUi实现输入框校验
- 安装
npm i element-ui -S
- 挂载
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
- 使用
- 页面模板
<template>
<div class="home">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="ruleForm.password"></el-input>
</el-form-item>
<el-form-item label="IP" prop="ipaddress">
<el-input v-model="ruleForm.ipaddress"></el-input>
</el-form-item>
<el-button style="width: 200px;" type="primary" @click="submitForm('ruleForm')">提 交</el-button>
</el-form>
</div>
</template>
<script>
import { validatePass, validateIP } from '@/utils/rules' // 引入校验
export default {
name: 'Home',
data() {
return {
ruleForm: {
name: '',
password: '',
ipaddress: ''
},
rules: {
name: [{
required: true,
message: '请输入用户名',
tirgger: 'blur'
}],
password: [{
required: true,
trigger: 'blur',
validator: validatePass
}],
ipaddress: [{
required: true,
trigger: 'blur',
validator: validateIP
}]
}
}
},
methods: {
submitForm(formName, callback) {
this.$refs[formName].validate((valid) => {
if (valid) {
callback && callback();
} else {
console.log("请输入正确的格式!!");
return false;
}
});
},
},
}
</script>
- 校验规则
新建src/utils/rules.js
文件
// 长度校验
let pswReg = /^[0-9A-Za-z]{5,16}$/;
export function validatePass(rule, value, callback) {
if (!pswReg.test(value)) {
callback(new Error("请输入5-16位英文、数字"));
} else {
callback();
}
}
// 校验ip
export function validateIP(rule, value, callback) {
var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
if(value === '') {
callback(new Error('请输入IP地址'))
} else {
if(!reg.test(value)) {
callback(new Error('请输入正确格式的ip地址'))
} else {
callback()
}
}
}
- 效果图: