1.首先要在HTML文檔中引入jQuery版本2.0以下的、一個(gè)vuejs庫 一個(gè)Element-UI庫
專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)鎮(zhèn)康免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
2.HTML的布局
提交 重置
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è)完成后的頁面跳轉(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')在這說明以下交互部分用jQuery寫的，更改$.ajax的URL部分是可以直接用的
以上所述是小編給大家介紹的基于Vuejs和Element的注冊(cè)插件的編寫方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
