<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<style type="text/css">
</style>
</head>
<body>
<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>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
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')
</script>
</html>
交互部分用jQuery寫的，更改$.ajax的URL部分是可以直接用的
