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

1.首先要在HTML文档中引入jQuery版本2.0以下的、一个vuejs库 一个Element-UI库

2.HTML的布局 

  
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
     
      提交
      重置
    
  

3.js部分内容的编写，带正则验证的

var Main = {  data(){
    // 验证名字正则表达式
    var validateName = (rule, value, callback) => {
      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, value, callback) => {
      var regExp=/^[u4e00-u9fa5]{2,4}$/;
      if (value === '') {
 callback(new Error('请输入昵称'));
      }else if(regExp.test(value) === false){
 callback(new Error('请按格式输入昵称'))
      } else {
 callback();
      }
  };
    //验证密码正则表达式
    var validatePass = (rule, value, 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, value, 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, value, 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, value, 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, value, 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, trigger: 'blur' }
 ],
 password: [
   { validator:validatePass , trigger: 'blur' }
 ],
 phone: [
   { validator:validateTel , trigger: 'blur' }
 ],
 email: [
   { required: false, message: '请输入邮箱地址', trigger: 'blur' },
   { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
 ],
 identity: [
   { validator:validateIdentity , trigger: 'blur' }
 ],
 qq: [
   { validator:validateQQ , trigger: 'blur' }
 ],
 wechat: [
   { validator:validateWechat , trigger: 'blur' }
 ],
 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的注册插件的编写方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！