今天介绍下web开发中常用的两种表单验证，form提交和ajax提交

form提交

表单是通过form提交时，用户点击提交（input typte="submit"）按钮触发form提交

<form action="listAllWork.jsp" name="form" method="Post" onsubmit="return check(this.form )" >  
            <div class="weui-cells">
                <div class="weui-cell weui-cell_select">
                    部门：<select name="dept" id="dept" onchange="showDept(this.value)">
                        <option value="">请选择</option>
                        <option value="1">部门一</option>
                        <option value="2">部门二</option>
                    </select>
                    姓名:<select name="xingming" id="xingming" >
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            <div class="weui-btn-area">
                <input type="submit"   name="submit"  value="查询"/> 
            </div>
        </form>  

触发事件 onsubmit="return check(this.form )" 当check函数返回true的时候正常提交，false则不提交。

 function check(form){
            var bumen =this.form.dept.value;
            var xingming =this.form.xingming.value;
            if(bumen==""){
                alert("请选择部门");
                return false;
            }else if(xingming==""){
                alert("请选择人名");
                return false;
            }else{
                return true;
            }
        }

check函数可以带参数也可以不带参数。不带参数的时候 通过js获取到表单项的值判断，如下：
document.getElementById("#").value
document.form.username.value
输入错误的时候提示用alert弹窗不太友好，可以使用div布局在页面显示。

ajax提交

ajax提交页面在编写的时候就不需要form表单了，用户点击提交触发ajax方法提交
下面举一个用户登录验证的例子
点击提交时验证表单项

  $("#login").click(function(){
                if(!checkPsw($("#psw").val())){
                    $("#psw").focus();
                }else{//格式验证通过后ajax验证登录信息
                    $.post("login_user.jsp",
                    {
                        name:$("#name").val(),
                        password:$("#psw").val()
                    },
                    function(data,status){
                        if(status=="success"){ 
                            if(data.indexOf("成功")<0){
                                $("#massage_login").html(data);
                            }else{}
                        }else{    
                            // $("#massage_add").html("jquery ajax执行出错啦！");
                            alert("jquery ajax执行出错啦！");
                        }
                    });
                }
            }); 

验证密码是否符合规则

 function checkPsw(a){
                reg = /^[a-z0-9]*$/;
                if(a.length<3) {
                    $("#massage_login").html("密码长度不能少于三个字符！");
                    return false;
                } else       
                    if(!reg.test(a)) {
                        $("#massage_login").html("密码只能由数字和字母组成！");
                        return false;
                    } else{
                    $("#massage_login").html("");
                    return true;
                }
            };  

用户输入时验证并提示

  $("#psw").keyup(
            function() {  
                n=$(this).val().replace(/[ ]/g,"").toLowerCase();
                $(this).val(n); 
                if(!checkPsw(n)){
                    $(this).focus();
                }
            });

以上就是网页中表单常用的验证，不足之处欢迎指正！
如需转载，请指明出处！