Html5用户注册自动校验

最新推荐文章于 2023-05-13 11:28:03 发布
VIP文章 最新推荐文章于 2023-05-13 11:28:03 发布
阅读量1.4w 收藏 10
点赞数 4
分类专栏： 前端开发 各种Js插件使用方法整理 文章标签： html5 注册校验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wp1603710463/article/details/51482630
版权

        抽时间写了一个带有自动校验功能的Html5用户注册Demo。使用到Handlebars模板技术和手机验证码校验。

     以下是效果截图：

       

    1.页面代码：usersRegister.hbs

<!DOCTYPE html>
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>用户注册</title>

    <!--[if lt IE 9]>
    <script src="/assets/scripts/html5shiv.js"></script>
    <![endif]-->

    <link href="/assets/styles/jquery.idealforms.min.css" rel="stylesheet" media="screen" />

    <style type="text/css">
        body {
            font: normal 15px/1.5 Arial, Helvetica, Free Sans, sans-serif;
            color: #222;
            overflow-y: scroll;
            padding: 60px 0 0 0;
        }

        .main {
            width: 560px;
            height: 480px;
            margin: -50px auto;
        }

        #my-form {
            width: 560px;
            height: 450px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 3em;
            border-radius: 3px;
            box-shadow: 0 0 2px rgba(0, 0, 0, .2);
        }
    </style>

    <script type="text/javascript" src="/assets/scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/assets/scripts/jquery.idealforms.js"></script>
</head>

<body>
<!-- style="background-image: url(static/image/bg.jpg) -->
    <div class="main" >
        <div style="height：5px;text-align:center;font-size:25px"> 欢迎您注册！</div>
        <!-- Begin Form -->
        <form id="my-form" class="myform">
            <div>
                <label>用户名:</label><input id="username" name="username" type="text" />
            </div>
            <div>
                <!-- <label>密码:</label><input id="pass" name="password" type="password" /> -->
                <label>密码:</label><input id="pass" name="password" type="text" />
            </div>
            <div>
                <label>邮箱:</label><input id="email" name="email"
                                         data-ideal="required email" type="email" />
            </div>
            <div>
                <label>电话:</label><input id="telephone" type="text" name="phone" data-ideal="phone" />
            </div>
            <div>
                <label>供应商V码:</label><input id="vCode" type="text" name="vCode" data-ideal="vCode" />
            </div>
            <div>
                <label>真实姓名:</label><input id="trueName" type="text" name="trueName" data-ideal="trueName" />
            </div>
            <div>
                <label>手机验证码:</label><input id="telCode" type="text" name="telCode" data-ideal="telCode" />
            </div>
            <div style="margin-bottom:5px;">
                <button id="getTelCode" type="button" style="margin-left:160px; margin-right:auto;" >获取手机校验码</button>
                <hr style="margin-top:5px; margin-bottom:5px;" />
            </div>
            <!--<div>
                <label>性别:</label>
                <select id="sex" name="sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div>
                <label>昵称:</label><input id="nickName" type="text" name="nickName" data-ideal="nickName" />
            </div>
            <div>
                <label>年龄:</label><input id="age" type="text" name="age" data-ideal="age" />
            </div>-->
            <!-- <div>
                <label>地址:</label><input type="text" name="address" data-ideal="address" />
            </div>
            <div>
                <label>QQ:</label><input type="text" name="qq" data-ideal="qq" />
            </div>
            <div>
                <label>邮编:</label><input type="text" name="zip" data-ideal="zip" />
            </div>
            <div>
                <label>传真:</label><input type="text" name="fax" data-ideal="fax" />
            </div>
            <div>
                <label>身份证:</label><input type="text" name="creditID" data-ideal="creditID" />
            </div>
            <div>
                <label>出生日期:</label><input name="date" class="datepicker"
                    data-ideal="date" type="text" placeholder="月/日/年" />
            </div>
            <div>
                <label>上传头像:</label><input id="file" name="file" multiple
                    type="file" />
            </div>
            <div>
                <label>个人主页:</label><input name="website" data-ideal="url"
                    type="text" />
            </div>
            <div>
                <label>备注:</label>
                <textarea id="comments" name="comments"></textarea>
            </div>
            -->
            <!-- <div id="languages">
                <label>语言:</label> <label><input type="checkbox"
                    name="langs[]" value="English" />英文</label> <label><input
                    type="checkbox" name="langs[]" value="Chinese" />中文</label> <label><input
                    type="checkbox" name="langs[]" value="Spanish" />西班牙文</label> <label><input
                    type="checkbox" name="langs[]" value="French" />法文</label>
            </div>
            <div>
                <label>精通几门:</label> <label><input type="radio"
                    name="radio" checked />1</label> <label><input type="radio"
                    name="radio" />2</label> <label><input type="radio" name="radio" />3</label>
                <label><input type="radio" name="radio" />4</label>
            </div>
            <div>
                <label>国籍:</label> <select id="states" name="states">
                    <option value="default">– 选择国籍 –</option>
                    <option value="AL">阿拉伯</option>
                    <option value="AK">中国</option>
                    <option value="AZ">美国</option>
                    <option value="AR">法国</option>
                    <option value="CA">英国</option>
                    <option value="CO">德国</option>
                    <option value="CT">西班牙</option>
                    <option value="DE">俄罗斯</option>
                </select>
            </div> -->
            <div style="margin-top:10px; margin-left:100px;margin-right:100px;">
                <button type="button" id="submit" class="submit">提交</button>
                <button id="reset" type="button" >重置</button>
            </div>

        </form>
        <!-- End Form -->
    </div>

<script type="text/javascript">
    var options = {

        onFail : function() {
            alert($myform.getInvalid().length + ' invalid fields.')
        },

        inputs : {
            'password' : {
                filters : 'required pass'
            },
            'username' : {
                filters : 'required username'
            },
            'email' : {
                filters : 'required email'
            },
            'phone' : {
                filters : 'required phone'
            },
            'trueName' : {
                filters : 'required'
            },
            'vCode' : {
                filters : 'required'
            },
            'telCode' : {
                filters : 'required'
            }

            /*
            'age' : {
                filters : 'required digits',
                data : {
                   min : 16,
                   max : 70
                }
            },
            'file' : {
                filters : 'extension',
                data : {
                    extension : [ 'jpg' ]
                }
            },
            'comments' : {
                filters : 'min max',
                data : {
                    min : 50,
                    max : 200
                }
            },
            'states' : {
                filters : 'exclude',
                data : {
                    exclude : [ 'default' ]
                },
                errors : {
                    exclude : '选择国籍.'
                }
            },
            'langs[]' : {
                filters : 'min max',
                data : {
                    min : 2,
                    max : 3
                },
                errors : {
                    min : 'Check at least <strong>2</strong> options.',
                    max : 'No more than <strong>3</strong> options allowed.'
                }
            }
            */
        }
    };

    $('#getTelCode').click(function() {
        var telephone = document.getElementById("telephone").value;   //手机号码
        if (telephone == null || telephone == ""){
            alert("手机号码不能为空!");
        }
        else{
            $.ajax({
                type : "GET",
                dataType : "json",
                url : "../api/getTelCode?telephone="+ telephone,
                success : function(msg) {
                },
                error : function(e) {
                    alert("获取手机校验码失败！" + e);
                }
            });
        }
    });

    var $myform = $('#my-form').idealforms(options).data('idealforms');

    $('#submit').click(function() {
        var username = document.getElementById("username").value; //用户名
        var password = document.getElementById("pass").value;    //密码
        var email = document.getElementById("email").value;     //邮箱
        var telephone = document.getElementById("telephone").value;     //手机号码
        var vCode = document.getElementById("vCode").value;     //公司V码
        var telCode = document.getElementById("telCode").value;     //手机校验码
        var trueName = document.getElementById("trueName").value;     //真实姓名

        $.ajax({
            type : "GET",
            url : "../api/usersRegister?username="+ username +"&password="+ password +"&email="+ email +"&telephone="+ telephone +"&vCode="+ vCode +"&telCode="+ telCode +"&trueName="+ trueName,

            success : function(msg) {
               //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
               var curWwwPath = window.document.location.href;
               //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
               var pathName = window.document.location.pathname;
               var pos = curWwwPath.indexOf(pathName);
               //获取主机地址，如： http://localhost:8083
               var localhostPaht = curWwwPath.substring(0, pos);
               //获取带"/"的项目名，如：/uimcardprj
               var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
               window.location.href = projectName + "/login";
               alert("注册成功!");
            },
            error : function(e) {
                alert("注册失败！" + e);
            }
        });
    });

    $('#reset').click(function() {
        $myform.reset().fresh().focusFirst();
    });

</script>

</body>
</html>
      2.jq输入校验：jquery.idealforms.js

    该js校验初始版本来自Cedric Ruiz，我略有修改。

  部分校验的规则如下： 

  required: '此处是必填的.'
最低0.47元/天 解锁文章
火雨_Nick
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Html5实现用户注册自动校验功能实例代码
09-27
主要介绍了 Html5实现用户注册自动校验功能实例代码的相关资料,需要的朋友可以参考下
LayUi做登录注册
weixin_44389353的博客
03-25 1万+
LayUi登录注册页面附代码登录页面注册页面附加CSS，JS代码 登录页面 下面展示登录页面 代码如下。 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" class="loginHtml"> <head> <meta charset="utf-8"> <titl...
html笔记——可预约当日的select制作
雪兰灵莹的小窝
09-25 955
时间可以预约整点和半点。当日的话，已经过了时间不能预约。实现方法如下：select如下： （不知道为什么直接粘html代码是不会显示代码的，so我选择上图）获得当前时间time1，设置time2为当天早上8点：var time1 = new Date(); var today = time1.getFullYear()+"/" +time1.getMonth()+1)+
密码与确认密码自动验证html,html表单验证确认密码
weixin_36368271的博客
05-30 8290
编写HTML注册表单,，javascript表单验证编写HTML注册表单,，需要字段：用户名,密码,确认密码,邮件,确认邮件,性汗。。。。阁下语气可以舒缓一些吗？ 我们抽出自己的时间来帮助别人，不是来听人吩咐的， 希望阁下能够注意点。html 表单中的确认密码怎么写啊(只用html编写)在用户注册类的网页上，有了密码的输入框，确认密码的输入框怎么写啊？确认密码的输入框 和密码的输入框 不是一模一样...
HTML + CSS + JavaScript 实现注册页面信息验证 详细教程（表单验证）
射手座轩木酱的代码天地~
05-13 1万+
本文介绍使用HTML + CSS + JavaScript 实现注册页面信息验证的详细方法。完整代码见文章末尾。对注册信息进行判断，判断其是否符合要求。（如：密码6-12位字符，不能有空格等）这里拿用户名和密码进行验证：用户名和密码都是6-12位字符，不能有空格。我们可以使用三个块标签，可以将这三个部分分别放到每个块标签中。不过这个时候还没有验证功能，下面将实现这一功能。（用户名/密码格式是否正确）创建一个注册页面，如下图。第一部分：两个段落文本。第三部分：登录/有账号。
html注册页面基本元素及初级验证
chaowang111的博客
10-22 943
【代码】html注册页面基本元素及初级验证。
Django之form组件自动校验数据实现
12-23
与此同时我们在好多场景下都需要对用户的输入做校验，比如校验用户是否输入，输入的长度和格式等正不正确。如果用户输入的内容有错误就需要在页面上相应的位置显示对应的错误信息.。 Django form组件就实现了上面所...
零基础学习AJAX之制作自动校验的表单
12-09
类似这样的应用大大的提高了用户的体验，本节简单介绍自动校验表单制作方法。从原理上分析ajax的作用。 1.搭建框架 首先为html框架 代码如下:  <form name=”register”>  <p><label xss=removed>输用户名&...
用户注册时判断密码强度
03-24
当用户输入密码时可以自动检测密码强度的强与弱，可以使用户做进一步的调整。
HTML表单验证(含用户名，密码，邮箱，手机号，验证码-验证)
qq_46015509的博客
06-09 4万+
HTML 表单登录js简单验证
js练习4：使用HTML5验证博客园注册页面.zip
08-27
js练习4：使用HTML5验证博客园注册页面.zip,js练习4：使用HTML5验证博客园注册页面.zip,js练习4：使用HTML5验证博客园注册页面.zip
HTML5用户注册页面模板
11-09
很好用的html5用户注册模板，美观实用，做参考
基于HTML5 用户注册页面
06-16
基于HTML5 用户注册页面 内附源码 可直接使用。。。。。。。。。。。。。。。。。。
HTML5用户注册页面实现案例
＃两个西柚
03-20 2159
【代码】HTML5用户注册页面实现案例。
Html5用户注册页面
zym0218的博客
07-18 2330
要想制作一个美观的用户注册页面，可不简单，下面来看看小编制作的用户注册页面，希望对大家有所帮助。
HTML5~用户注册页面的设计与实现
weixin_45626404的博客
12-03 2万+
用户注册页面的设计与实现 需要制作的效果图如下 大概思路：我们先设置底色灰色，然后写出表单，再利用CSS给表单进行设置。 1、设置底色（css 行内式） <style> body{background:#cccccc;} </style> 2、制作表单 <div id="container"> <h1>用户注册页面</h1> <hr/> <!---表单--> <form
css+html5简单注册页面实现
qq_28569939的博客
08-25 5661
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0px; padding: 0px; box-sizing: border-box; } .
HTML实现登录注册界面
热门推荐
qq_44892111的博客
04-09 7万+
我是一个初学者，学了有一星期的时间，分享一下最近在制作的登录注册界面。 登录页面：简单的运用了html和css的东西，没有用到js（目前功力不够）。 另外还用到了阿里巴巴矢量图标库的一些图标，毕竟自己不会做UI <!DOCTYPE > <html> <html lang="ch"> <head> <meta charset="utf-...
HTML5--输入验证
杨森源的博客
08-24 2963
使用输入验证在获取用户输入数据的时候，得到的有可能是一些不堪敷用的东西。其原因可能是用户输入出错，也可能是设计者没有把自己想要的数据类型说清楚。HTML5引入了对输入验证(input validation)的支持。设计者可以告诉浏览器自己需要什么类型的数据，然后浏览器在提交表单之前会使用这些信息检查用户输入的数据是否有效。要是数据有问题，浏览器会提示用户进行更正，而且只有把这些问题解决后才能提交表单
html用户注册界面
最新发布
11-09
HTML用户注册界面是一个网页界面，用于用户在网站上进行注册操作。这个界面通常包括以下几个要素。 1. 标题：界面顶部通常会有一个标题，用于说明该页面的功能，比如“用户注册”或“创建新账号”。 2. 表单：用户...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值