Skip to content

Instantly share code, notes, and snippets.

@pulading1988
Last active August 17, 2017 03:56
Show Gist options
  • Save pulading1988/be579890b50c2009f83a2a74e7971304 to your computer and use it in GitHub Desktop.
Save pulading1988/be579890b50c2009f83a2a74e7971304 to your computer and use it in GitHub Desktop.
vue.js写的一个表单验证示例
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();
},
}
})
@asd12l
Copy link

asd12l commented May 27, 2017

后端校验思路是怎么样的?
是否后端有cookiesid?或者通过传入的Math.random()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment