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

257 阅读 0 评论 170 点赞

我是靠谱客的博主土豪曲奇，这篇文章主要介绍基于Vuejs和Element的注册插件的编写方法，现在分享给大家，希望可以做个参考。

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

复制代码

1
2
3
<script src="js/jquery-1.11.0.min.js"></script>
 <script src="js/vue.js"></script>
 <script src="js/Element-UI.js"></script>

2.HTML的布局

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div id="app">
  <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
    <el-form-item label="名字" prop="name">
      <el-input type="text" v-model="ruleForm2.name" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="昵称" prop="niceName">
      <el-input type="text" v-model="ruleForm2.niceName" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm2.password" type="password"></el-input>
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input v-model="ruleForm2.phone" type="tel"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="ruleForm2.email" type="email"></el-input>
    </el-form-item>
    <el-form-item label="身份证号码" prop="identity">
      <el-input v-model="ruleForm2.identity" type="number"></el-input>
    </el-form-item>
    <el-form-item label="QQ" prop="qq">
      <el-input v-model="ruleForm2.qq" type="number"></el-input>
    </el-form-item>
    <el-form-item label="微信号" prop="wechat">
      <el-input v-model="ruleForm2.wechat" type="text"></el-input>
    </el-form-item>
    <el-form-item label="个性签名" prop="signature">
      <el-input type="textarea" v-model="ruleForm2.signature"></el-input>
    </el-form-item>
     <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
      <el-button @click="resetForm('ruleForm2')">重置</el-button>
    </el-form-item>
  </el-form>
</div>

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
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')