基于vue 表单验证插件Vaild的开发
组件核心代码代码,命名liang.js
/*
* @Liang liweiliang QQ:406320591(406320591@QQ.com).
* @date 2018-08-08,
* @version 1.0.0
* @liweiliang Inc. All Rights Reserved
*/
let Liang = {};
Liang.install = function(Vue,options){
Vue.prototype.$Validate = (_this) => {
var _Vaild = _this.dataset.vaild;
if(!!_Vaild){
var pattern = new RegExp(_Vaild);
if(pattern.test(_this.value)){
console.log("success");
}else{
var errmsg = _this.dataset.errmsg;
Vue.prototype.$toast({text:errmsg});
return false;
}
}else{
console.log("无验证规则");
}
return true;
};
Vue.prototype.$Vaild = (formElem) => {
var checkResult = true;
var elements = formElem.elements;
for (var i = 0; i < elements.length; i++) {
checkResult = Vue.prototype.$Validate(elements[i]) && checkResult;
if(!checkResult){
return false;
}
}
return checkResult;
}
}
export default Liang
使用方法在VUE中的main.js引入组件liang.js且全局方法使用
import Liang from "./utils/Liang"
Vue.use(Liang);
页面使用方法
- 给表单必须用form标签包起来,给form增加ref属性,
- 给对应的input增加对应的data-vaild正则验证属性,data-errmsg增加对应的错误提示信息内容
在提交的表单的按钮绑定请求方法,在请求前利用$refs获取对应的表单然后利用封装好的this.$Vaild进行数据校验
<div class="main_login"> <h4 class="main_login_title">欢迎登录</h4> <form ref="login_form"> <ul class="main_login_list"> <li><span>手机号</span></li> <li class="main_login_line"> <input name="phone" maxlength="11" type="text" placeholder="请输入手机号" data-vaild="^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$" data-errmsg="请选择联系人1手机号" autocomplete="off" v-model="phone" ref="phone" @input="phoneChange" > <em class="main_input_clsText" @click="cls_phone" ref="cls01" ></em> </li> <li><span>密码</span></li> <li class="main_login_line"> <input type="password" name="passwod" data-vaild="^\S{3,8}" data-errmsg="密码3-8位" v-model="password" placeholder="请输入密码" > <em class="pwdHide"></em> </li> </ul> </form> <input @click="handlerLogin" class="main_login_btn" type="button" value="登录"> <div class="main_login_Jump"> <router-link to="/register">快速注册</router-link> <router-link to="/forgetpwd">忘记密码</router-link> </div> </div>
版权声明:本文为李维亮博主的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:http://www.liweiliang.com/889.html
- 上一篇: vue单页 使用keep-alive页面返回不刷新
- 下一篇: Vue中如何定义全局函数
评论已关闭