快捷搜索:

一款基于jQuery的带Tooltip表单验证的注册表单,jquerytooltip

一款基于jQuery的带Tooltip表单验证的注册表单,jquerytooltip

今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信息时,表单会自动验证所填写的信息,如果信息填写有误,即会在相应的字段内以Tooltip提示框的形式显示错误信息。这款jQuery表单实现非常简单,使用起来相对比较轻巧。

在线预览   源码下载

这款插件js要引用jquery.js库,还有一个easyform.js 库。

html代码部分如下:

    <div >
        <form id="reg-form" action="" method="post">
        <table>
            <tr>
                <td>
                    用户名
                </td>
                <td>
                    <input name="uid" type="text" id="uid" easyform="length:4-16;char-normal;real-time;"
                        message="用户名必须为4—16位的英文字母或数字" easytip="disappear:lost-focus;theme:blue;" ajax-message="用户名已存在!">
                </td>
            </tr>
            <tr>
                <td>
                    密码
                </td>
                <td>
                    <input name="psw1" type="password" id="psw1" easyform="length:6-16;" message="密码必须为6—16位"
                        easytip="disappear:lost-focus;theme:blue;">
                </td>
            </tr>
            <tr>
                <td>
                    确认密码
                </td>
                <td>
                    <input name="psw2" type="password" id="psw2" easyform="length:6-16;equal:#psw1;"
                        message="两次密码输入要一致" easytip="disappear:lost-focus;theme:blue;">
                </td>
            </tr>
            <tr>
                <td>
                    email
                </td>
                <td>
                    <input name="email" type="text" id="email" easyform="email;real-time;" message="Email格式要正确"
                        easytip="disappear:lost-focus;theme:blue;" ajax-message="这个Email地址已经被注册过,请换一个吧!">
                </td>
            </tr>
            <tr>
                <td>
                    昵称
                </td>
                <td>
                    <input name="nickname" type="text" id="nickname" easyform="length:2-16" message="昵称必须为2—16位"
                        easytip="disappear:lost-focus;theme:blue;">
                </td>
            </tr>
        </table>
        <div >
            <input value="注 册" type="submit" >
            <input value="我有账号,我要登录" type="button" >
        </div>
        <br >
        </form>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#reg-form').easyform();
        });
    </script>

via:http://www.w2bc.com/Article/13972

http://www.bkjia.com/jQuery/934732.htmlwww.bkjia.comtruehttp://www.bkjia.com/jQuery/934732.htmlTechArticle一款基于jQuery的带Tooltip表单验证的注册表单,jquerytooltip 今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信...

本文源自: AG88环亚

您可能还会对下面的文章感兴趣: