JQuery 常见的表单验证方法

一、allow 的验证：

对复选框绑定单击事件， 如果没有勾选则报错提示， 勾选的话隐藏报错提示信息

Example：

<script>
    // 复选框同意协议 -- 单击改变勾选的状态 -- click
    var $allow = $('#allow')
    $allow.click(function () {
        // 如果没有勾选  报错，勾选的话隐藏错误信息表示可以提交
        // 看jq验证 勾选到底是什么值  true  没有勾选是false
        // alert($allow.prop('checked'))
        fnCheckAllow()
    })
    // 验证是否同意协议
    function fnCheckAllow() {
        if ($allow.prop('checked')) {
            // 隐藏错误信息表示可以提交
            $allow.next().next().hide()
        } else {
            // 没有勾选  报错
            $allow.next().next().show().html('请勾选同意协议')
        }
    }
</script>

二、submit 的验证

1、当点击表单的提交按钮，会触发表单的 submit() 事件

2、如果验证都合法则提交， 否则阻止提交

Example：

< script >
    // 定义开关变量
    var flagUser = false
    // var flagPwd = false
    // 同意协议默认是勾选的 开关打开
    var flagAllow = true
    // 表单submit提交事件
    var $myform = $('#myform')
    $myform.submit(function () {
        // 如果验证合法提交，否则阻止表单提交return false
        fnCheckSubmit()
    })
    // 提交的函数
    function fnCheckSubmit() {
        // 避免用户打开页面直接单击注册：定义开关默认不能提交（关闭），当正则验证通过了可以提交（打开）
        if (flagUser && flagAllow) {
            // 提交  所有都是true  &&
            alert('ok')
        } else {
            alert('bu ok')
            return false //阻止表单提交
        }
    }
</script>