jquery前台验证

<script type="text/javascript">
    /*function checkOpp() {
        if (form.handledOpinion.value == '') {
            alert("审核意见不能为空!");
            form.handledOpinion.focus();
            return false;
        }
        return true;
    }*/
    $().ready(function() {
        $("#form").validate({
            rules: {
                handledOpinion: {
                    required: true,
                    maxlength: 150,
                }
            },
            messages: {
                handledOpinion: {
                    required: "审核意见不能为空",
                    maxlength: "输入意见过长",
                }
            }
        })
    })
</script>

<form id="form" name="form" action="dohandle.htm" method="post" <%--οnsubmit="return checkOpp()"--%>>
        <span>审核意见：</span>
        <textarea style="border:1px solid #000" name="handledOpinion" rows="2" cols="80"></textarea>
    </div>
<pre name="code" class="html"></form>

注：注释掉的是js验证；jquery中form根据id定位，而字段名称则是根据name

jquery还有自定义验证

<script type="text/javascript">
    $().ready(function () {
        $("#form").validate({
            rules: {
                email: {
                    checkEmail:true,
                    maxlength: 50
                },
                loginPassword: {
                    required: true,
                    rangelength: [3, 20],
                },
                loginPasswordAgain: {
                    required: true,
                    rangelength: [3, 20],
                    equalTo: "#loginPassword"
                }
            },
            messages: {
                email: {
                    email: "邮箱格式错误",
                    maxlength: "请输入一个最大长度是 {0} 的字符串"
                },
                loginPassword: {
                    required: "请输入密码",
                    rangelength: "请输入长度在 {0} 到 {1} 之间的字符串",
                },
                loginPasswordAgain: {
                    required: "请输入密码",
                    rangelength: "请输入长度在 {0} 到 {1} 之间的字符串",
                    equalTo: "两次密码不一样，请重新输入"
                }
            }
        });
        $.validator.addMethod("checkEmail",function(value,element,params){
            var checkEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ ;
            return this.optional(element)||(checkEmail.test(value));
        },"请输入正确的邮箱！");
    })
</script>
<style>
    .error {
        color: red;
    }
</style>

指定提示错误信息的位置：errorElement  -----修改提示文字的包装；默认是提示信息在input后面

<script type="text/javascript">
    $().ready(function () {
                $("#form").validate({
                    errorElement: 'span',
                    errorPlacement: function(error, element) {
                        error.appendTo(element.parent());
                    },
                    rules: {
                        operatorAuthority: {
                            required: true,
                        },
                    },
                    messages: {
                        operatorAuthority: {
                            required: "不能为空",
                        },
                    }
                })
            })
</script>

<pre name="code" class="java"><li>
   <div>
     <span>权限设置：</span>
     <input style="margin-right: 15px;" type="radio" id="operatorAuthority" name="operatorAuthority" value="普通用户" />普通用户
     <input style="margin-left: 50px;margin-right: 15px;" type="radio" name="operatorAuthority" value="会员" />会员
     <label style="margin-left: 50px;"  class="error"></label>
   </div>
</li>