我们通常写的表单中，往往要判断用户填的是否符合要求，那么可以通过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;}});});