1.首先要在HTML文檔中引入jQuery版本2.0以下的、一個(gè)vuejs庫(kù) 一個(gè)Element-UI庫(kù)

 <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="身份證號(hào)碼" 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="微信號(hào)" prop="wechat">      <el-input v-model="ruleForm2.wechat" type="text"></el-input>    </el-form-item>    <el-form-item label="個(gè)性簽名" 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部分內(nèi)容的編寫，帶正則驗(yàn)證的

var Main = {  data(){    // 驗(yàn)證名字正則表達(dá)式    var validateName = (rule, value, callback) => {      var regExp=/^[/u4e00-/u9fa5]{2,4}$/;    if (value === '') {      callback(new Error('請(qǐng)輸入名字'));    }else if(regExp.test(value) === false){      callback(new Error('請(qǐng)輸入正確的名字'))    } else {      callback();    }  };    //  驗(yàn)證昵稱正則表達(dá)式    var validateName2 = (rule, value, callback) => {      var regExp=/^[/u4e00-/u9fa5]{2,4}$/;      if (value === '') {        callback(new Error('請(qǐng)輸入昵稱'));      }else if(regExp.test(value) === false){        callback(new Error('請(qǐng)按格式輸入昵稱'))      } else {        callback();      }  };    //驗(yàn)證密碼正則表達(dá)式    var validatePass = (rule, value, callback) => {      var regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;      if (value === '') {        callback(new Error('請(qǐng)輸入密碼'))      } else if (regExp.test(value) === false) {        callback(new Error('8-16字母和數(shù)字組成，不能是純數(shù)字或純英文'))      } else {        callback()      }    }    //驗(yàn)證電話號(hào)碼正則表達(dá)式    var validateTel = (rule, value, callback) => {      var regExp = /^1[3|5|8|7][0-9]{9}$/;    if (value === '') {      callback(new Error('請(qǐng)輸入手機(jī)號(hào)碼'));    }else if (regExp.test(value) === false) {      callback(new Error('請(qǐng)輸入正確手機(jī)號(hào)碼'))    } else {      callback();    }  };    //驗(yàn)證身份正號(hào)碼正則表達(dá)式    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('請(qǐng)輸入身份證號(hào)碼'))      } else {        callback();      }    };    //驗(yàn)證QQ號(hào)碼正則表達(dá)式    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('請(qǐng)輸入正確的QQ號(hào)碼'))      } else {        callback();      }    };    //驗(yàn)證微信號(hào)碼正則表達(dá)式    var validateWechat = (rule, value, callback) => {      var regExp =/^[a-zA-Z/d_]{5,}$/;      if (value === '') {        callback();      }else if (regExp.test(value) === false) {        callback(new Error('請(qǐng)輸入正確的微信號(hào)'))      } 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: '請(qǐng)輸入郵箱地址', trigger: 'blur' },          { type: 'email', message: '請(qǐng)輸入正確的郵箱地址', trigger: 'blur,change' }        ],        identity: [          { validator:validateIdentity , trigger: 'blur' }        ],        qq: [          { validator:validateQQ , trigger: 'blur' }        ],        wechat: [          { validator:validateWechat , trigger: 'blur' }        ],        signature: [        { required: false, message: '請(qǐng)?zhí)顚懟顒?dòng)形式', 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) {          //用于注冊(cè)完成后的頁(yè)面跳轉(zhuǎn)          console.log(data)        })      } else {        //注冊(cè)信息不符合規(guī)則        console.log('error submit!!');        return false;        }      });    },    //重新填寫注冊(cè)信息    resetForm(formName) {      this.$refs[formName].resetFields();      }    }}var Ctor = Vue.extend(Main)new Ctor().$mount('#app')