Last active
August 17, 2017 03:56
-
-
Save pulading1988/be579890b50c2009f83a2a74e7971304 to your computer and use it in GitHub Desktop.
vue.js写的一个表单验证示例
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var mobileRE = /^(((13[0-9]{1})|(14[57]{1})|(15[0-9]{1})|(17[678]{1})|(18[0-9]{1}))+\d{8})$/; | |
var passwordRE = /^[A-Za-z0-9]{6,20}$/; | |
var BASE_PATH = '${basePath}'; | |
var j_captchaUrl = '${basePath}/jcaptcha'; // 获取验证码的后端地址 | |
var app = new Vue({ | |
el: '#app', | |
data: { | |
mobile: '', | |
j_captcha: '', | |
vaildCode: '', | |
password: '', | |
conpassword: '', | |
j_captchaUrl: j_captchaUrl | |
}, | |
computed: { | |
validation: function() { | |
return { | |
mobile: mobileRE.test(this.mobile), | |
j_captcha: !!this.j_captcha.trim(), | |
vaildCode: !!this.vaildCode.trim(), | |
password: passwordRE.test(this.password), | |
conpassword: passwordRE.test(this.conpassword) | |
} | |
}, | |
isValid: function() { | |
var validation = this.validation; | |
return Object.keys(validation).every(function(key) { | |
console.log('[' + key + ']' + validation[key]); | |
return validation[key]; | |
}) | |
} | |
}, | |
methods: { | |
// 用户注册 | |
register: function() { | |
if (this.password !== this.conpassword) { | |
alert('两次输入密码不一致,请重新输入!'); | |
return false; | |
} | |
if (this.isValid) { | |
$.ajax(BASE_PATH + '/doregister', { | |
data: { | |
mobile: this.mobile, | |
vaildCode: this.vaildCode, | |
password: this.password | |
}, | |
dataType: 'json', | |
type: 'post', | |
timeout: 10000, | |
success: function(data) { | |
if (data.success) { | |
// 3秒后自动跳转到首页! | |
setTimeout(function() { | |
window.location.href = BASE_PATH; | |
}, | |
3000); | |
} else { | |
if (data.respinfo) { | |
alert(data.respinfo); | |
} else { | |
alert('注册失败!'); | |
} | |
} | |
}, | |
error: function(xhr, type, errorThrown) { | |
console.log(type); | |
alert('注册失败!'); | |
}, | |
beforeSend: function() {}, | |
complete: function() {} | |
}); | |
} else { | |
if (!this.validation.mobile) { | |
alert('请输入有效的手机号码!'); | |
} else if (!this.validation.j_captcha) { | |
alert('请输入图片验证码!'); | |
} else if (!this.validation.vaildCode) { | |
alert('请输入短信验证码!'); | |
} else if (!this.validation.password) { | |
alert('请输入有效的密码,格式为6至20位的字母和数字!'); | |
} else if (!this.validation.conpassword) { | |
alert('请输入有效的密码,格式为6至20位的字母和数字!'); | |
} | |
} | |
}, | |
// 发送短信验证码 | |
send: function() { | |
if (this.validation.mobile) { | |
// 调用倒计时插件 | |
$('#btn-code').timer(); | |
$.ajax(BASE_PATH + '/doSendRegVaild', { | |
data: { | |
mobile: this.mobile | |
}, | |
dataType: 'json', | |
type: 'post', | |
timeout: 10000, | |
success: function(data) { | |
if (data.success) { | |
if (data.respinfo) { | |
alert(data.respinfo); | |
} else { | |
alert('验证码获取成功!'); | |
} | |
} else { | |
if (data.respinfo) { | |
alert(data.respinfo); | |
} else { | |
alert('验证码获取失败!'); | |
} | |
} | |
}, | |
error: function(xhr, type, errorThrown) { | |
console.log(type) alert('验证码获取失败!'); | |
}, | |
beforeSend: function() {}, | |
complete: function() {} | |
}); | |
} else { | |
alert('请输入有效的手机号码!'); | |
} | |
}, | |
// 检测输入的图片验证码是否正确 | |
check: function() { | |
var self = this; | |
$.ajax(BASE_PATH + '/verifycaptcha', { | |
data: { | |
j_captcha: this.j_captcha | |
}, | |
dataType: 'json', | |
type: 'get', | |
timeout: 10000, | |
success: function(data) { | |
console.log(data.success); | |
if (data.success) { | |
} else { | |
alert('图片验证码输入错误!'); | |
self.j_captcha = ''self.changej_captcha(); | |
} | |
}, | |
error: function(xhr, type, errorThrown) { | |
console.log(type); | |
alert('验证码获取失败!'); | |
}, | |
beforeSend: function() {}, | |
complete: function() {} | |
}); | |
}, | |
// 重新获取验证码 | |
changej_captcha: function() { | |
this.j_captchaUrl = j_captchaUrl + '?' + Math.random(); | |
}, | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
后端校验思路是怎么样的?
是否后端有cookiesid?或者通过传入的Math.random()