基于Vuejs和Element的注册插件的编写方法
发布时间：2020-12-17 02:54:10 所属栏目：百科 来源：网络整理
导读：1.首先要在HTML文档中引入jQuery版本2.0以下的、一个vuejs库 一个Element-UI库 2.HTML的布局 3.js部分内容的编写，带正则验证的 { var regExp=/^[u4e00-u9fa5]{2,4}$/; if (value === '') { callback(new Error('请输入名字')); }else if(regExp.test(valu
1.首先要在HTML文档中引入jQuery版本2.0以下的、一个vuejs库 一个Element-UI库2.HTML的布局3.js部分内容的编写，带正则验证的 {
var regExp=/^[u4e00-u9fa5]{2,4}$/;
if (value === '') {
callback(new Error('请输入名字'));
}else if(regExp.test(value) === false){
callback(new Error('请输入正确的名字'))
} else {
callback();
}
};
// 验证昵称正则表达式
var validateName2 = (rule,4}$/;
if (value === '') {
callback(new Error('请输入昵称'));
}else if(regExp.test(value) === false){
callback(new Error('请按格式输入昵称'))
} else {
callback();
}
};
//验证密码正则表达式
var validatePass = (rule,callback) => {
var regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
if (value === '') {
callback(new Error('请输入密码'))
} else if (regExp.test(value) === false) {
callback(new Error('8-16字母和数字组成，不能是纯数字或纯英文'))
} else {
callback()
}
}
//验证电话号码正则表达式
var validateTel = (rule,callback) => {
var regExp = /^1[3|5|8|7][0-9]{9}$/;
if (value === '') {
callback(new Error('请输入手机号码'));
}else if (regExp.test(value) === false) {
callback(new Error('请输入正确手机号码'))
} else {
callback();
}
};
//验证身份正号码正则表达式
var validateIdentity = (rule,callback) => {
var regExp = /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/;
if (value === '') {
callback();
}else if (regExp.test(value) === false) {
callback(new Error('请输入身份证号码'))
} else {
callback();
}
};
//验证QQ号码正则表达式
var validateQQ = (rule,callback) => {
var regExp =/^[1-9][0-9]{5,10}$/;
if (value ==='') {
callback();
}else if (regExp.test(value) === false) {
callback(new Error('请输入正确的QQ号码'))
} else {
callback();
}
};
//验证微信号码正则表达式
var validateWechat = (rule,callback) => {
var regExp =/^[a-zA-Zd_]{5,}$/;
if (value === '') {
callback();
}else if (regExp.test(value) === false) {
callback(new Error('请输入正确的微信号'))
} else {
callback();
}
};
return {
ruleForm2: {
name: '',niceName: '',password: '',phone:'',identity:'',qq:'',wechat:'',signature:''
},rules2: {
name: [
{ validator: validateName,trigger: 'blur' }
],niceName: [
{ validator: validateName2,password: [
{ validator:validatePass,phone: [
{ validator:validateTel,email: [
{ required: false,message: '请输入邮箱地址',trigger: 'blur' },{ type: 'email',message: '请输入正确的邮箱地址',trigger: 'blur,change' }
],identity: [
{ validator:validateIdentity,qq: [
{ validator:validateQQ,wechat: [
{ validator:validateWechat,signature: [
{ required: false,message: '请填写活动形式',trigger: 'blur' }
]
}
};
},methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
var _self = this
$.ajax({
url: 'http://192.168.0.150:8080/user/userRegister',type: 'POST',data: _self.ruleForm2,}).done(function(data) {
console.log(data)
}).fail(function(data) {
//用于注册完成后的页面跳转
console.log(data)
})
} else {
//注册信息不符合规则
console.log('error submit!!');
return false;
}
});
},//重新填写注册信息
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
在这说明以下交互部分用jQuery写的，更改$.ajax的URL部分是可以直接用的 以上所述是小编给大家介绍的基于Vuejs和Element的注册插件的编写方法。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |