基于Vuejs+Element的注册插件的编写

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

  
  

   
   	<
   
   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的布局	

<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部分内容的编写，带正则验证的

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-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, 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部分是可以直接用的