找回密码
当前位置：前端开发者 > 教程 > 正文

前端简单的表单验证

2018-11-13 20:50:40 分类：教程 阅读(106) 评论(0)
前端开发代码规范文档
前端代码开发
前端开发代码规范

html 代码片段

<!DOCTYPE html>
    <head lang=”en”>
        <meta charset=”UTF-8″ />
        <title>jquery-表单验证</title>
        <style>
            body {
                position: absolute;
                top: 25%;
                left: 33%;
            }
            table {
                color: #666;
            }
            table tr {
                height: 50px;
            }
            .state1 {
                color: #aaa;
            }
            .state2 {
                color: #00b0ff;
            }
            .state3 {
                color: #eb4f38;
            }
            .state4 {
                color: #00b694;
            }
            input[type=’submit’] {
                width: 80px;
                height: 30px;
                font-weight: bold;
                border-radius: 15px;
                background-color: #3cbab7;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <form>
            <table>
                <tr>
                    <td>用 户 名：</td>
                    <td><input type=”text” name=”username” /></td>
                    <td><span class=”state1″>请输入用户名</span></td>
                </tr>
                <tr>
                    <td>密&nbsp;&nbsp;码：</td>
                    <td><input type=”password” name=”password” /></td>
                    <td><span class=”state1″>请输入密码</span></td>
                </tr>
                <tr>
                    <td>确认密码：</td>
                    <td><input type=”password” name=”repassword” /></td>
                    <td><span class=”state1″>请输入确认密码</span></td>
                </tr>
                <tr>
                    <td>邮&nbsp;&nbsp;箱：</td>
                    <td><input type=”email” name=”email” /></td>
                    <td><span class=”state1″>请输入邮箱</span></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type=”submit” value=”提 交” /></td>
                    <td></td>
                </tr>
            </table>
        </form>
    </body>
    <script src=”http://code.jquery.com/jquery-1.8.0.min.js”></script>
    <script>
        $(function() {
            var username = false
            var password = false
            var repassword = false
            var email = false
            // username
            $(‘input[name=”username”]’)
                .focus(function() {
                    $(this)
                        .parent()
                        .siblings()
                        .find(‘span’)
                        .text(‘用户名应该在6-20位之间!’)
                        .removeClass(‘state1 state4 state3’)
                        .addClass(‘state2’)
                })
                .blur(function() {
                    var len = $(this).val().length
                    if (len >= 6 && len <= 20 && $(this).val() != ”) {
                        $(this)
                            .parent()
                            .siblings()
                            .find(‘span’)
                            .text(‘用户名输入正确!’)
                            .removeClass(‘state1 state4 state3’)
                            .addClass(‘state4’)
                        username = true
                    } else {
                        $(this)
                            .parent()
                            .siblings()
                            .find(‘span’)
                            .text(‘用户名输入错误,应在6-20位之间!’)
                            .removeClass(‘state1 state2 state4’)
                            .addClass(‘state3’)
                    }
                })
            // password
            $(‘input[name=”password”]’)
                .focus(function() {
                    $(this)
                        .parent()
                        .siblings()
                        .find(‘span’)
                        .text(‘密码6-20位字符,字母开头,只包含字母数字下划线!’)
                        .removeClass()
                        .addClass(‘state2’)
                })
                .blur(function() {
                    var reg = /^[a-z | A-Z]\w{5,19}$/
                    if (reg.test($(this).val())) {
                        $(this)
                            .parent()
                            .siblings()
                            .find(‘span’)
                            .text(‘密码输入正确!’)
                            .removeClass()
                            .addClass(‘state4’)
                        password = true
                    } else {
                        $(this)
                            .parent()
                            .siblings()
                            .find(‘span’)
                            .text(‘密码输入错误,请重新输入!’)
                            .removeClass()
                            .addClass(‘state3’)
                    }
                })
            // repassword
            $(‘input[name=”repassword”]’)
                .focus(function() {
                    $(this)
                        .parent()
                        .siblings()
                        .find(‘span’)
                        .text(‘请输入确认密码!’)
                        .removeClass()
                        .addClass(‘state2’)
                })
                .blur(function() {
                    var reg = /^[a-z | A-Z]\w{5,19}$/
                    if (
                        reg.test($(this).val()) &&
                        $(this).val() == $(‘input[name=”password”]’).val()
                    ) {
                        $(this)
                            .parent()
                            .siblings()
                            .find(‘span’)
                            .text(‘确认密码输入正确!’)
                            .removeClass()
                            .addClass(‘state4’)
                        repassword = true
                    } else {
                        $(this)
                            .parent()
                            .siblings()
                            .find(‘span’)
                            .text(‘两次输入不一致!’)
                            .removeClass()
                            .addClass(‘state3’)
                    }
                })
            // email
            $(‘input[name=”email”]’)
                .focus(function() {
                    $(this)
                        .parent()
                        .siblings()
                        .find(‘span’)
                        .text(‘请输入正确的EMAIL格式!’)
                        .removeClass()
                        .addClass(‘state2’)
                })
                .blur(function() {
                    var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/
                    if (reg.test($(this).val())) {
                        $(this)
                            .parent()
                            .siblings()
                            .find(‘span’)
                            .text(‘邮箱输入正确!’)
                            .removeClass()
                            .addClass(‘state4’)
                        email = true
                    } else {
                        $(this)
                            .parent()
                            .siblings()
                            .find(‘span’)
                            .text(‘邮箱输入错误，请输入重新输入!’)
                            .removeClass()
                            .addClass(‘state3’)
                    }
                })
            // 提交
            $(‘input[type=”submit”]’).click(function() {
                if (username && password && repassword && email) {
                    $(‘form’).submit()
                } else {
                    return alert(‘您未填写齐全，或填写格式错误!’)
                }
            })
        })
    </script>
</html>

addClass():
描述: 为每个匹配的元素添加指定的样式类名
.addClass( className ),className为一个String字符串，为指定元素添加这个classname的类
.addClass( function(index, currentClass) )，这个函数返回一个或更多用空格隔开的要增加的样式名。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中this指向匹配元素集合中的当前元素。

removeClass():
描述: 移除集合中每个匹配元素上一个，多个或全部样式。
.removeClass( [className ] )，每个匹配元素移除的一个或多个用空格隔开的样式名。
.removeClass( function(index, class) )，这个函数，返回一个或多个将要被移除的样式名。index 参数表示在所有匹配元素的集合中当前元素的索引位置。class 参数表示原有的样式名。

web前端开发代码资源
web前端开发标准源代码
web前端开发代码规范
» 本文来自：前端开发者 » 《前端简单的表单验证》
» 本文链接地址：https://www.rokub.com/6391.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论