我们通常写的表单中,往往要判断用户填的是否符合要求,那么可以通过js的正则式来验证。js的正则式语法可参考菜鸟教程:JS正则表达式
下面是我的表单页面:
在点击下一步的时候,可以通过JS来控制下,如果不符合要求,则不进行跳转。下面代码中的变量名都是输入框所填项的英文,应该没歧义吧,我就不展示HTML部分了,直接给出js判断。
$(document).ready(function() {
/*
Fullscreen background
*/
$.backstretch("assets/img/backgrounds/1.jpg");
$('#top-navbar-1').on('shown.bs.collapse', function(){
$.backstretch("resize");
});
$('#top-navbar-1').on('hidden.bs.collapse', function(){
$.backstretch("resize");
});
/*
Form
*/
$('.registration-form fieldset:first-child').fadeIn('slow');
$('.registration-form input[type="text"], .registration-form input[type="password"], .registration-form textarea').on('focus', function() {
$(this).removeClass('input-error');
});
// next step
$('.registration-form .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
//账号判断开始
var user_id = $("#user-id");
var length_userid = user_id.val().length;
console.log(length_userid);
if( length_userid > 16 || length_userid < 6 || !/^\w+$/.test(user_id.val())){
user_id.addClass('input-error');
$.jGrowl("账号填写错误!", {position:'bottom-right'});
next_step = false;return;
}else{
$.ajaxSettings.async = false;
$.post("postFunction.php?action=checkUser",{user_id:user_id.val()}, function (data) {
console.log(data);
if($.trim(data) === "error"){
user_id.addClass('input-error');
$.jGrowl("该账号已被注册!", {position:'bottom-right'});
next_step = false;return;
}else{
user_id.removeClass('input-error');
}
//昵称判断开始
var nick = $("#nick");
var length_nick = nick.val().length;
console.log(length_nick);
if( length_nick > 10 || length_nick < 1 || /[\s>?<]/.test(nick.val())){
$.jGrowl("昵称填写错误!", {position:'bottom-right'});
nick.addClass('input-error');
next_step = false;return;
}else{
user_id.removeClass('input-error');
}
//昵称判断结束
//学校判断开始
var school = $("#school");
var length_school = school.val().length;
console.log(length_school);
if( length_school < 1){
$.jGrowl("学校填写错误!", {position:'bottom-right'});
school.addClass('input-error');
next_step = false;return;
}else{
school.removeClass('input-error');
}
//学校判断结束
//班级判断开始
var class1 = $("#class");
var length_class = class1.val().length;
console.log(length_class);
if( length_class < 1){
$.jGrowl("班级填写错误!", {position:'bottom-right'});
class1.addClass('input-error');
next_step = false;return;
}else{
class1.removeClass('input-error');
}
//学校判断结束
//密码判断开始
var password = $("#password"), repeat_password = $("#repeat-password");
var length_password = password.val().length;
console.log(length_password);
if( length_password < 6 || length_password > 16 || password.val() !== repeat_password.val()){
$.jGrowl("密码填写错误!", {position:'bottom-right'});
password.addClass('input-error');
repeat_password.addClass('input-error');
next_step = false;return;
}else{
password.removeClass('input-error');
repeat_password.removeClass('input-error');
}
//密码判断结束
//邮箱判断开始
var email = $("#email");
var length_email = email.val().length;
console.log(length_email);
if( length_email < 1 || !/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(email.val())){
$.jGrowl("邮箱填写错误!", {position:'bottom-right'});
school.addClass('input-error');
next_step = false;return;
}else{
email.removeClass('input-error');
}
//邮箱判断结束
//手机号判断开始
var tel = $("#tel");
var length_tel = tel.val().length;
console.log(length_tel);
if( length_tel != 11 || !/^1(3|4|5|6|7|8|9)\d{9}$/.test(tel.val())){
$.jGrowl("手机号填写错误!", {position:'bottom-right'});
tel.addClass('input-error');
next_step = false;return;
}else{
$.ajaxSettings.async = false;
var params = {
user: '新用户',
template:489148,
tel:tel.val(),
type:'register'
};
$.post("duanxin/sendSMS.php",params, function (data) {
console.log(data);
if($.trim(data) !== "success"){
$.jGrowl(data, {position:'bottom-right'});
tel.addClass('input-error');
next_step = false;return;
}else{
tel.removeClass('input-error');
}
});
$.ajaxSettings.async = true;
}
//手机号判断结束
if( next_step ) {
parent_fieldset.fadeOut(400, function() {
$(this).next().fadeIn();
});
}
});
$.ajaxSettings.async = true;
}
//账号判断结束
});
// previous step
$('.registration-form .btn-previous').on('click', function() {
$(this).parents('fieldset').fadeOut(400, function() {
$(this).prev().fadeIn();
});
});
// submit
$('.registration-form').on('submit', function(e) {
//判断短信验证码,此处判断貌似无效,改放到后台操作
var sms = $("#sms");
var length_sms = sms.val().length;
if( length_sms !== 6 || !/^\d{9}$/.test(sms.val())){
$.jGrowl("验证码填写错误!", {position:'bottom-right'});
sms.addClass('input-error');
next_step = false;
}else{
$.ajaxSettings.async = false;
$.post("postFunction.php?action=checkSMS",{sms:sms.val()}, function (data) {
console.log(data);
if(!data) {
e.preventDefault();
$.jGrowl("验证码填写错误!", {position:'bottom-right'});
sms.addClass('input-error');
$("#pre").click();
}
else {
sms.removeClass('input-error');
}
});
$.ajaxSettings.async = true;
}
});
});