基于Vuejs和Element的注册插件的编写方法

前端之家收集整理的这篇文章主要介绍了基于Vuejs和Element的注册插件的编写方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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-Z\d_]{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的注册插件的编写方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/38176.html

猜你在找的Vue相关文章