精华内容
下载资源
问答
  • 使用 纯JQuery 进行 表单 验证

    万次阅读 2016-07-27 11:18:32
    对于JavaScript而言,进行表单数据的验证可谓是很有必要的,而且一般我们都会在网页上先进行一下表单验证,然后服务器端再次进行验证,来确保用户提交数据的准确性。下面就来分享一个JQuery实现的表单验证。制作表单...

    对于JavaScript而言,进行表单数据的验证可谓是很有必要的,而且一般我们都会在网页上先进行一下表单验证,然后服务器端再次进行验证,来确保用户提交数据的准确性。下面就来分享一个JQuery实现的表单验证。


    本文的大纲为:


    制作表单

    • 要想实现表单验证,前提是得有个表单了。
    <form method="post" action="">
                <fieldset>
                    <legend>表单详情</legend>
                    <div class="int">
                        <label for="username">用户名:</label>
                        <input type="text" id="username" class="required" /> 
                    </div>
                    <div class="int">
                        <label for="email">邮&nbsp;箱:</label>
                        <input type="email" id="email" class="required">
                    </div>
                    <div class="int">
                        <label for="persininfo">个人资料</label>
                        <textarea type="text" id="personinfo" ></textarea>
                    </div>
                    <div class="sub">
                        <input type="submit" value="提交" id="send">
                        <input type="reset" id="res">
                    </div>
                </fieldset>
            </form>

    得到的界面如下:
    界面表单初始化

    • 小红点?

      想必眼睛雪亮的你一经发现了后面的小红点,这就是我们定义了input标签里面required类属性值的原因,这样可以显得我们的表单更加的人性化,更加的美观。
      使用到的JQuery代码如下:

        // 首先添加非空验证小红点
        $("form :input.required").each(function(){
            var $required = $("<strong class='high'>*</strong>");
            $(this).parent().append($required);
        });

    正式的表单验证

    • 使用markdown的流程图进行演示吧,思路如下
    Created with Raphaël 2.1.0用户名符合规范?邮箱是否符合规范?表单验证结束报错提示输出报错提示输出yesnoyesno
    • 使用JQuery也是比较简单的,只要是思路有了,剩下的就是些语法问题。
    // 下面添加每个元素的特定的验证规则
            $("form :input").blur(function(){
                var $parent = $(this).parent();
                // 验证用户名
                if($(this).is("#username")){
                    if(this.value=="" || this.value.length<6){
                        var errmsg = "请至少输入6位的用户名!";
                        $parent.append("<span class='error'>"+errmsg+"</span>");
                    }else{
                        var rightmsg = "输入数据正确!";
                        $parent.append("<span>"+rightmsg+"</span>");
                    }
                }
    
                // 验证邮箱
                if($(this).is("#email")){
                    if(this.value==""|| (this.value!=""&& !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
                        var errmsg = "请输入正确的邮箱格式!";
                        $parent.append("<span class='error'>"+errmsg+"</span>");
                    }else{
                        var rightmsg = "输入正确!";
                        // $parent.append("<span>"+rightmsg+"</span>");
                        $parent.append("<span>"+rightmsg+"</span>");
                    }
                }
            });
    • 界面效果

    出错提示语句

    优化效果

    现在出错提示已经有了,但是如果我们修正了input标签里面的数据,错误提示仍然会存在,所以我们需要在其失去鼠标焦点的时候将出错的提示语句删掉。所以我们需要为form :input.required标签们添加一个blur事件。

    // 失去焦点之后删除之前的数据提示
            $("form :input.required").blur(function(){
                var $parent = $(this).parent();
                // $parent.find(".error").remove();
                if($(this).is("#username")){
                    if(this.value=="" || this.value.length<6){
                        // var errmsg = "请至少输入6位的用户名!";
                        // $parent.append("<span class='error'>"+errmsg+"</span>");
                    }else{
                        $parent.find(".error").remove();
                    }
                }
    
                // 验证邮箱
                if($(this).is("#email")){
                    if(this.value==""|| (this.value!=""&& !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
                        // var errmsg = "请输入正确的邮箱格式!";
                        // $parent.append("<span class='error'>"+errmsg+"</span>");
                    }else{
                        $parent.find(".error").remove();
                    }
                }
            })

    实现的效果如下:
    正确输入的结果

    完整的例子

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>表单的选项验证</title>
        <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
        <style>
            .int {
                width: 200px;
                padding: 12px;
                background-color: silver;
            }
            .container {
                width: 240px;
                align-content: center;
                display: block;
            }
            .high {
                color: red;
            }
        </style>
    </head>
    <body>
        <div align="center" class="container">
            <form method="post" action="">
                <fieldset>
                    <legend>表单详情</legend>
                    <div class="int">
                        <label for="username">用户名:</label>
                        <input type="text" id="username" class="required" /> 
                    </div>
                    <div class="int">
                        <label for="email">邮&nbsp;箱:</label>
                        <input type="email" id="email" class="required">
                    </div>
                    <div class="int">
                        <label for="persininfo">个人资料</label>
                        <textarea type="text" id="personinfo" ></textarea>
                    </div>
                    <div class="sub">
                        <input type="submit" value="提交" id="send">
                        <input type="reset" id="res">
                    </div>
                </fieldset>
            </form>
        </div>
        <script>
            // 首先添加非空验证小红点
            $("form :input.required").each(function(){
                var $required = $("<strong class='high'>*</strong>");
                $(this).parent().append($required);
            });
    
    
            // 下面添加每个元素的特定的验证规则
            $("form :input").blur(function(){
                var $parent = $(this).parent();
                // 验证用户名
                if($(this).is("#username")){
                    if(this.value=="" || this.value.length<6){
                        var errmsg = "请至少输入6位的用户名!";
                        $parent.append("<span class='error'>"+errmsg+"</span>");
                    }else{
                        var rightmsg = "输入数据正确!";
                        $parent.append("<span>"+rightmsg+"</span>");
                    }
                }
    
                // 验证邮箱
                if($(this).is("#email")){
                    if(this.value==""|| (this.value!=""&& !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
                        var errmsg = "请输入正确的邮箱格式!";
                        $parent.append("<span class='error'>"+errmsg+"</span>");
                    }else{
                        var rightmsg = "输入正确!";
                        // $parent.append("<span>"+rightmsg+"</span>");
                        $parent.append("<span>"+rightmsg+"</span>");
                    }
                }
            });
    
            // 失去焦点之后删除之前的数据提示
            $("form :input.required").blur(function(){
                var $parent = $(this).parent();
                // $parent.find(".error").remove();
                if($(this).is("#username")){
                    if(this.value=="" || this.value.length<6){
                        // var errmsg = "请至少输入6位的用户名!";
                        // $parent.append("<span class='error'>"+errmsg+"</span>");
                    }else{
                        $parent.find(".error").remove();
                    }
                }
    
                // 验证邮箱
                if($(this).is("#email")){
                    if(this.value==""|| (this.value!=""&& !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
                        // var errmsg = "请输入正确的邮箱格式!";
                        // $parent.append("<span class='error'>"+errmsg+"</span>");
                    }else{
                        $parent.find(".error").remove();
                    }
                }
            })
        </script>
    </body>
    </html>

    在实际的开发中,表单验证是非常的实用的,希望这段文字能帮到需要帮助的人。

    展开全文
  • HTML5表单验证

    千次阅读 2015-03-09 15:54:54
    第一步:策划表单功能 首先,我们得为我们的表单策划一下该有什么功能,用什么形式表现。在这个示例中,我们就制作一个比较简单的留言表单。需要的功能如下: 名称 电子邮件 网站地址 提交按钮 ...

    第一步:策划表单功能

    首先,我们得为我们的表单策划一下该有什么功能,用什么形式表现。在这个示例中,我们就制作一个比较简单的留言表单。需要的功能如下:

    名称

    电子邮件

    网站地址

    提交按钮

    我们都希望用户能够填写正确的信息再提交,要实现这一点,我们可以使用HTML5客户端验证新技术。那怎么样使用这个功能呢?在这里简单的使用服务器验证,不做进一步的深入了解。

    第二步:策划表单形式

    在我心中,憧憬着一个美丽而简约的提交表单。虽然现在很丑,但是他不是野鸡是凤凰。

    就像上图显示的,包含下面几个部分:

    表格标题(Required fields)

    表格标签

    表格输入(Placeholder text)

    表单提示

    提交按钮

    现在我们已经确定好了表单的形式,就开始创建HTML结构代码。

    第三步:创建HTML结构代码

    根据上面确定的形式来创建最基本的HTML代码。

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>HTML5 Contact Form</title>

    <link rel="stylesheet" media="screen" href="styles.css" rel="external nofollow"  >

    </head>

    <body>

    </body>

    </html>

    在这里页面还是空白的。这只是一个网页最基本的代码。

    第四步:HTML表单

    开始在页面中创建表单。

    <form class="contact_form" action="" method="post">

    </form>

    第五步:HTML表单元素

    为了更好的理解和维持表单的形式,我们将一步一步的添加表单里面的元素。

    那最先开始的是创建表单表头和第一个输入框:

    <ul>

    <li>

    <h2>联系我们</h2>

    <span class="required_notification">* 表示必填项</span>

    </li>

    <li>

    <label for="name">姓名:</label>

    <input />

    </li>

    </ul>

    表单提示

    根据我们的策划图来看,我们要给表单的“电子邮件”、“网站”增加提示语,所以我们要在input下面增加提示语区域,再将他们统一样式处理。

    <li>

    <label for="email">电子邮件:</label>

    <input />

    <span class="form_hint">正确格式为:javin@example.com</span>

    </li>

    其余的表单输入元素

    继续添加其他的表单输入元素。

    <li>

    <label for="website">网站:</label>

    <input />

    <span class="form_hint">正确格式为:http://www.jiawin.com</span>

    </li>

    <li>

    <label for="message">留言:</label>

    <textarea cols="40" rows="6" ></textarea>

    </li>

    <li>

    <button class="submit">提交</button>

    </li>

    第六步:添加占位符属性

    作为HTML5的改进之一的网页表单可以设置placeholder占位符属性。占位符字段会在输入区域为空时或者不处于焦点时显示的,在以前我们只能用javascript来实现。增加占位符字段可以引导用户正确的输入信息。

    <input placeholder="Javin" />

    <input placeholder="javin@example.com" />

    <input placeholder="http://www.jiawin.com/" />

    提示技巧:placeholder文本风格定义:

    这里给大家一个小技巧,如果你想改变占位符的默认风格,可以通过下面的代码方式修改(注意浏览器的前缀):

    :-moz-placeholder {

    color: blue;

    }

    ::-webkit-input-placeholder {

    color: blue;

    }

    在现代的浏览器中一般都支持placeholder,除了IE9。如果你需要他在所有的浏览器中都支持的话,可以考虑用javascript解决方案。

    第七步:定义基本的CSS

    接下来定义下基本的CSS样式。

    1、格式化 :focus 的样式

    Webkit内核浏览器会自动给添加一些焦点样式,我们要自定义风格,所以需要把它给去掉默认值。

    *:focus {outline: none;}

    2、字体排版样式

    添加字体以及字体大小样式。

    body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}

    .contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}

    .form_hint, .required_notification {font-size: 11px;}

    3、列表样式

    因为我们的表单结构是用列表,所以定义列表来美化。

    .contact_form ul {

    width:750px;

    list-style-type:none;

    list-style-position:outside;

    margin:0px;

    padding:0px;

    }

    .contact_form li{

    padding:12px;

    border-bottom:1px solid #eee;

    position:relative;

    }

    此外,我们增加了顶部和底部的边框线,使用:first-child和:last-child选择符来实现。这样子就增加了我们表单的美观,但是古老的浏览器不支持这两个选择符,不过这不是重点,我们要向前看,只要最流行的现代浏览器支持就行。

    .contact_form li:first-child, .contact_form li:last-child {

    border-bottom:1px solid #777;

    }

    4、表头样式

    现在来定义我们的表头风格,有两部分,一个是标题标题,另一个是通知的星号(*)表示必填字段。

    .contact_form h2 {

    margin:0;

    display: inline;

    }

    .required_notification {

    color:#d45252;

    margin:5px 0 0 0;

    display:inline;

    float:right;

    }

    5、表单输入样式

    表单的输入元素是表单的核心,用来收集信息。

    .contact_form label {

    width:150px;

    margin-top: 3px;

    display:inline-block;

    float:left;

    padding:3px;

    }

    .contact_form input {

    height:20px;

    width:220px;

    padding:5px 8px;

    }

    .contact_form textarea {padding:8px; width:300px;}

    .contact_form button {margin-left:156px;}

    现在再加入一些额外的美化样式,其中会使用到CSS3,在现代浏览器中视觉效果会更加。

    .contact_form input, .contact_form textarea {

    border:1px solid #aaa;

    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;

    border-radius:2px;

    }

    .contact_form input:focus, .contact_form textarea:focus {

    background: #fff;

    border:1px solid #555;

    box-shadow: 0 0 3px #aaa;

    }

    /* Button Style */

    button.submit {

    background-color: #68b12f;

    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));

    background: -webkit-linear-gradient(top, #68b12f, #50911e);

    background: -moz-linear-gradient(top, #68b12f, #50911e);

    background: -ms-linear-gradient(top, #68b12f, #50911e);

    background: -o-linear-gradient(top, #68b12f, #50911e);

    background: linear-gradient(top, #68b12f, #50911e);

    border: 1px solid #509111;

    border-bottom: 1px solid #5b992b;

    border-radius: 3px;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    -ms-border-radius: 3px;

    -o-border-radius: 3px;

    box-shadow: inset 0 1px 0 0 #9fd574;

    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;

    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;

    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;

    -o-box-shadow: 0 1px 0 0 #9fd574 inset;

    color: white;

    font-weight: bold;

    padding: 6px 20px;

    text-align: center;

    text-shadow: 0 -1px 0 #396715;

    }

    button.submit:hover {

    opacity:.85;

    cursor: pointer;

    }

    button.submit:active {

    border: 1px solid #20911e;

    box-shadow: 0 0 10px 5px #356b0b inset;

    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;

    -moz-box-shadow: 0 0 10px 5px #356b0b inset;

    -ms-box-shadow: 0 0 10px 5px #356b0b inset;

    -o-box-shadow: 0 0 10px 5px #356b0b inset;

    }

    第八步:添加CSS3互动

    我们一起来添加一下互动效果,当鼠标点中输入框时,增加输入框的长度。

    .contact_form input:focus, .contact_form textarea:focus { /* add this to the already existing style */

    padding-right:70px;

    }

    在支持transition的浏览器中,增加CSS缓慢过渡效果。

    .contact_form input, .contact_form textarea { /* add this to the already existing style */

    -moz-transition: padding .25s;

    -webkit-transition: padding .25s;

    -o-transition: padding .25s;

    transition: padding .25s;

    }

    第九步:增加HTML5 required属性

    我们一直期待的东西,终于要来了,就是HTML5表单处理工具。在HTML5中添加required到input/textarea后,会告诉浏览器在提交表单前,表单值必须是存在的;因此,如果没有填入字段,表单将不会被提交。现在我们在需要验证的输入框里面加上required。

    <input required />

    <input required />

    <input required />

    <textarea cols="40" rows="6" required ></textarea>

    第十步:定义required字段样式

    这里定义输入框输入文本后的样式,我们将星号(*)作为背景图放置到每个必填项,因此我们得先填充右侧的空间,防止文字重叠到红色的星号图像。

    .contact_form input, .contact_form textarea {

    padding-right:30px;

    }

    使用css的伪类选择符:required来增加红色的星号图像。

    input:required, textarea:required {

    background: #fff url(images/red_asterisk.png) no-repeat 98% center;

    }

    表单提交后会发生什么呢?

    现在的表单提交后,如果表单是不正确的填写信息或者空白,那么将会出现不同的显示效果,这是因为不同的浏览器之间,提示用户的弹出框的视觉效果是不一样的,希望在以后的某一天能够真正的全部标准化。

    你可以查看quirksmode来检查你的浏览器是否支持required。

    提示技巧:

    实际上你可以修改一些浏览器的弹出框的风格:

    ::-webkit-validation-bubble-message {

    padding: 1em;

    }

    第十一步:理解HTML5新的type属性和客户端验证

    HTML5的验证都是根据表单内的type属性来工作的,在过去的几年,HTML只支持一小部分的type属性,例如:type="text",HTML5出现后增加了几个type新的属性,其中就包含email和url,这些都将会被使用到我们的表单当中。

    通过结合输入type属性和新的required属性,浏览器现在可以实现验证表单数据的客户端。如果浏览器不支持新的type属性,例如:type="email",那么他会被默认成为type="text",这点是非常值得我们兴奋的,实质上,这是一种倒退兼容性的表现,在地球上的所有浏览器都可以与之兼容。

    那么,如果浏览器不支持新的type属性,对于移动设备上的浏览器来说是没什么明显区别的(除非定义了css规则),type="email"属性将会和type="text"看起来是相同的,然后只有当涉及到用户界面时,对于移动浏览器是有差别的。

    一个例子:iPhone

    苹果公司的iPhone手机检测表单类型和动态的改变屏幕上的键盘时会提供上下文联想的字符。例如,所有的电子邮件地址,需要字符:“ @ ”和“ . ”, 那iPhone会在确认输入类型为电子邮件时,会自动提供这些字符。

    第十二步:更改type属性

    我们在本例中到现在为止,设置的表单字段都默认为type="text",现在我们需要改变“电子邮箱”和“网站”这两个为:type="email"type="url"。

    <input placeholder="javin@example.com" required />

    <input placeholder="http://www.jiawin.com/" required/>

    第十三步:HTML5验证

    正如在前面所说到的,HTML5在默认情况下是通过type来验证的。这个验证功能是默认激活状态的,如果你要关闭这个功能可以用novalidate属性来实现:

    <form novalidate>

    <-- do not validate this form -->

    <input />

    </form>

    Name字段

    先来看看第一个字段,是“姓名”,要求填写的是名称。首先,先定义显示为错误(无效)时的样式,当鼠标在焦点上的时候,我们就添加一个红色的边框和红色的阴影。最后也显示一个“无效”的感叹号小图标。

    .contact_form input:focus:invalid, .contact_form textarea:focus:invalid { /* when a field is considered invalid by the browser */

    background: #fff url(images/invalid.png) no-repeat 98% center;

    box-shadow: 0 0 5px #d45252;

    border-color: #b03535

    }

    如果,用户填写的信息是正确的,那我们就定义这时的样式为绿色的边框和绿色的阴影以及显示一个“正确”打勾的小图标,这时候,不管鼠标是否在焦点上,都要保持正确的状态。

    .contact_form input:required:valid, .contact_form textarea:required:valid { /* when a field is considered valid by the browser */

    background: #fff url(images/valid.png) no-repeat 98% center;

    box-shadow: 0 0 5px #5cd053;

    border-color: #28921f;

    }

    Email字段和URL字段

    因为我们设置了type和required的属性,所以我们的css样式和验证规则已经被运用到浏览器,会自动根据特有的规则自行验证。

    第十四步:介绍HTML5的pattern属性

    用type="email"属性来举例说明,在大部分浏览器中验证的字段为@(任意字符 + “@” 符号 + 任意字符)。这显示是有限的,靠它阻止用户输入空格或信息是不能完美解决的。另一个type="url"属性,在大多数浏览器中的验证字段的最低限度为“任意字符加一个冒号”。假如,你输入的是“H:”,然后进行验证,这将会通过验证,但很明显这不是一个网址,所以我们希望可以更加详细具体的验证用户所输入的信息,那我们应该在HTML5中怎么解决使用服务器验证来实现上述说到的问题呢?

    pattern属性

    这个pattern属性可以接受一个JavaScript的正则表达式,我们可以通过一个正则表达式来验证字段,最后看看我们的HTML代码:

    <input placeholder="http://johndoe.com" required pattern="(http|https)://.+" />

    现在我们的“网站”字段将只会接受http://或者https://开头的字符了。这个正则表达式模式有时候的确让人难以捉摸,但如果你有时间去学习它,那么你们将会开阔另一片天地。

    第十五步:表单字段的提示语的样式

    现在我们来定义下表单提示语,他们会在用户使用表单时根据表单验证规则的正确与否按照特定的提示语显示出来,最终指引用户正确提交表单。

    .form_hint {

    background: #d45252;

    border-radius: 3px 3px 3px 3px;

    color: white;

    margin-left:8px;

    padding: 1px 6px;

    z-index: 999; /* hints stay above all other elements */

    position: absolute; /* allows proper formatting if hint is two lines */

    display: none;

    }

    因为在默认表单下,提示语是不会出现的,所以我们先设置为display:none,然后根据表单填写信息的正确与否来显示不同风格的提示语。

    使用::before选择符

    现在,为了美化提示语的提示框,我们需要一个小的三角形,来指引用户。小三角形可以用图片来显示,但在这里我们用css来编写显示,因为这个三角形在页面中不是一个很重要的功能,只是一个视觉形式。我们可以使用unicode几何图像,再结合::before选择符来实现最终效果。

    在通常情况下,我们在网页中会使用unicode格式编码来显示特殊图形(如上图所示)。因为我们要使用css::before选择符,所以在content:""规则里面,我们必须要使用三角形所对应的unicode转义编码。然后我们通过定位,将它显示在我们希望显示的地方。

    .form_hint::before {

    content: "\25C0"; /* left point triangle in escaped unicode */

    color:#d45252;

    position: absolute;

    top:1px;

    left:-6px;

    }

    使用相邻选择符

    最后,我们使用相邻选择符来显示或者隐藏表单的提示语。相邻选择符(x + y)选择的是紧贴在x元素之后的y元素。根据表单字段验证后的结果来显示提示语,然后在使用相邻选择符来显示和隐藏。

    .contact_form input:focus + .form_hint {display: inline;}

    .contact_form input:required:valid + .form_hint {background: #28921f;} /* change form hint color when valid */

    .contact_form input:required:valid + .form_hint::before {color:#28921f;} /* change form hint arrow color when valid */

    正如你从css中看到的,我们还设置了随着判断一个字段是否正确来显示不同的风格样式的提示语。

    第十六步:坐下来慢慢的欣赏你美丽的HTML5表单


    转载出处

    展开全文
  • HTML简单注册界面——含表单验证

    万次阅读 多人点赞 2018-10-28 14:43:47
    最近学习HTML表单,感慨万千。虽然看起来好像不难学,但要是真自己实践起来问题却多多。这里是我写的一个简单的注册页面,只有“注册账号、密码、重输密码”三个文本框,...(记一下,也希望能有需要的人一点帮助。)

       最近学习HTML表单,感慨万千。虽然看起来好像不难学,但要是真自己实践起来问题却多多。这里是我写的一个简单的注册页面,只有“注册账号、密码、重输密码”三个文本框,还包含了原生JavaScript验证。(记一下,也希望能给有需要的人一点帮助。)

        下面直接上代码,已测试可运行,有问题可留言。

        虽然看起来代码一大段,但是主要内容不多——简单的表单内容、然后是js验证,而且是分开验证,应该比较容易懂,结合注释应该可以理解,这里就不详解了。

    <!DOCTYPE html>
    <html>
      <head>
        <title>8_常用注册页面的表单实例(含验证).html</title>
    	
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    
      	<style type="text/css">
    		body{
    			background-image: url(https://imgchr.com/content/images/system/home_cover_1552414407320_3a5f92.jpg);
    			background-repeat: no-repeat;
    			/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */    
    			background-attachment: fixed;  /*此条属性必须设置否则可能无效*/    
    			/* 让背景图基于容器大小伸缩 */   
    			background-size: cover;  
    			/* 设置背景颜色,背景图加载过程中会显示背景色 */   
    			background-color: #CCCCCC;
    		}
    		#user_reg{
    			font-family: 微软雅黑;
    			font-size: 40px;
    			text-align: center;
    			margin-top: 200px;
    		}
    		form{
    			width: 500px;					/*设置宽度,方便使其居中*/
    			margin: 40px auto auto auto;	/*上右下左*/
    			font-size: 25px;
    		}
    		input{
    			height: 30px;
    			width: 12em;
    			margin-top: 5px;
    			margin-bottom: 5px;
    		}
    		/*input标签下的属性选择器*/
    		input[type="submit"],input[type="reset"]{
    			height: 25px;
    			width: 5em;
    			margin-top: 5px;
    			margin-left: 6px;
    		}
    	</style>
      </head>
      
      <script type="text/javascript">
    	//onblur失去焦点事件,用户离开输入框时执行 JavaScript 代码:
    	//函数1:验证邮箱格式
      	function validate_username(username){
      		//定义正则表达式的变量:邮箱正则
      		var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      		//console.log(username);
      		if(username !="" && username.search(emailReg) != -1)
      		{
      			document.getElementById("test_user").innerHTML = "<font color='green' size='3px'>√邮箱格式正确</font>";
      		}else{
      			document.getElementById("test_user").innerHTML = "<font color='red' size='3px'>邮箱格式错误</font>";
      		}
      	}
      
     	//函数2:验证密码是否符合要求:匹配6位密码,由数字和字母组成:
      	function validate_password(password){
      		//^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6-10}$
    		//测试密码:12345y
      		var passwordReg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/;
      		if(password != "" && password.search(passwordReg) != -1)
      		{
      			document.getElementById("test_pw").innerHTML = "<font color='green' size='3px'>√密码格式正确</font>";
      		}else{
      			document.getElementById("test_pw").innerHTML = "<font color='red' size='3px'>密码格式错误</font>";
      			alert("密码有6位,由数字和字母组成!");
      		}
      	}
      	
    	//函数3:验证两次输入的密码是否一样
      	 function validate_password2(password2){
      		var password = document.getElementById("password").value;
      		//测试:console.log(password);
      		//测试:console.log(password2);
      		if (password == ""){
    			document.getElementById("is_test_pw").innerHTML = "<font color='red' size='3px'>密码不为空</font>";
    		}else if(password==password2){
      			document.getElementById("is_test_pw").innerHTML = "<font color='green' size='3px'>√两次输入的密码相同</font>";
      		}else{
      			document.getElementById("is_test_pw").innerHTML = "<font color='red' size='3px'>两次输入的密码不相同</font>";
      			console.log("密码有6位,由数字和字母组成!");
      		}
      	} 
      	
    	//函数4:验证表单是否已经填好
      	function validate_form(){
      		var username = document.getElementById("username").value;
      		var password = document.getElementById("password").value;
      		var password2 = document.getElementById("password2").value;
      		//console.log("表单填写正确,可以正常提交!");
      	
      		//这三个,如果任何一个有问题,都返回false
      		//18128@qq.com		12345y
      		var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      		var passwordReg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/;
      		
      		if(username != "" && emailReg.test(username)){
      			if(password !="" && passwordReg.test(password)){
      				if(password2==password){
      					alert("信息填写正确,可以正常提交!");
      					console.log("信息填写正确,可以正常提交!");
      					return true;
      				}else{
      					alert("密码不一致,提交失败,请重新填写!");
      					console.log("密码不一致,提交失败,请重新填写!");
      					return false;
      				}
      			}else{
      				alert("密码格式错误,提交失败,请重新填写!");
      				console.log("密码格式错误,提交失败,请重新填写!");
      				return false;
      			}
      		}else{
      			alert("注册的账号不符合要求,提交失败,请重新填写!");
      			console.log("注册的账号不符合要求,提交失败,请重新填写!");
      			return false;
      		}
      	}
      </script>
      
     <body>
      	<div id="user_reg">用户注册:</div>
    	<form action="./servlet/RegisterServlet" method="post" name="form" >
    		<table>
    			<tr>
    				<td>请输入账号:</td>
    				<td><input type="text" id="username" name="username" placeholder="只能用邮箱注册" onblur="validate_username(this.value)"/></td>
    				<td id="test_user"></td>
    			</tr>
    			<tr>
    				<td>请输入密码:</td>
    				<td><input type="password" id="password" name="password" placeholder="6位密码由数字和字母组成" onblur="validate_password(this.value)"/></td>
    				<td id="test_pw"></td>
    			</tr>
    			<tr>
    				<td>请确认密码:</td>
    				<td><input type="password" id="password2" name="password2" onblur="validate_password2(this.value)" /></td>
    				<td id="is_test_pw"></td>
    			</tr>
    			<tr>
    				<td></td>
    				<td ><input type="submit" id="submit_form" value="注册" onclick="return validate_form()"/>
    					<input type="reset" value="重置"/>
    				</td>
    			</tr>
    		</table>
    	</form>
    </body>
    </html>

       放几张效果图吧:


    2019年9月25日更新:

    修改背景为在线图片,添加测试地址:https://codepen.io/yansheng836/pen/aboMEmb

    截图:

    展开全文
  • 作为一名Web设计人员、一名Coder,你是否已经厌倦了网页设计中的表单验证问题?不厌其烦的拷贝 if(x) { alert(wrong);} ,还是使用一个难以尽和我意的IDE ?好吧,让我来告诉你一种比较lazy的写法,你也许就不会对...
        作为一名Web设计人员、一名Coder,你是否已经厌倦了网页设计中的表单验证问
    题?不厌其烦的拷贝 if(x) { alert('wrong');} ,还是使用一个难以尽和我意的
    IDE ?好吧,让我来告诉你一种比较lazy的写法,你也许就不会对表单验证那么头大
    了……
        原理:
               表单验证无非是要对要收集每一条信息进行验证,也就是要写一个名为
           frmValid的javascript函数,在其中执行如下操作:
                 ...
                 if (待验证条目 不符合条件)
                 {
                      alert('出错了!');
                      待验证条目.focus();
                      return false;
                 }
                 ...
                 // all right
                 return true;
               当然,<form ... onsubmit='return frmValid()'>必须包含在
           HTML代码中。想想看,待验证条目越多代码越长,也就越容易出错。
               下面我们把验证条目放到一个数组里,如下:
                 elemArray = new Array(
                     '待验证条目名',
                     '验证条件',
                     '出错提示');
               那么验证代码将大大精简,我们只要如下使用循环就可实现上述冗长
           代码时下的功能,这里我们用witheval语句构造判断条件:
                 with(eval('obj.'+elems[i][0]))
                 {
                     if(eval(elems[i][1]))
                     {
                         window.alert(elems[i][2]);
                         focus();
                         return false;
                     }
                 }
               我们建立多位数组就可实现循环遍历每个条目:
                 elems = new Array(
                     new Arrary( ...),
                     ...
                 );
                 for(i = 0; i < elems.length; i++)
                 {
                     // 上面的验证语句
                 }

        
        实战:
            1、使用如下例子编写验证脚本:
    <SCRIPT LANGUAGE="javascript" type="text/javascript">
    //
    // Function: frmValid
    // ------------------
    // Author    hongz
    // Usage:    YourForm.οnsubmit="return frmValid(this)".
    // Purpose:  To validate form elements in an integrated way.
    //

    function frmValid(obj)
    {
        // Elements array, initialization for validation
        elems = new Array(
            new Array(
                'username',  
    // name of elements to be validated
               
    'value.length<1 || value.search(/[^a-zA-z0-9_]/)>=0'
                             // validation condition
                '无效的用户名:只能输入6-20位字母、数字、下划线的组合!'),
                             // prompt on failure
            new Array(
                'password'
                'value.length<5 || value.search(/[^a-zA-z0-9_]/)>=0'
                '无效的密码:只能输入6-20位字母、数字、下划线的组合!'),
            new Array(
                'email'
                'isMail(value)==false'
                'Email是您在网上的重要联络工具,请务必正确填写!')
        );

        // Validate here, using eval statement.
        for(i = 0; i < elems.length; i++)
        {
            with(eval('obj.'+elems[i][0]))
            {
                if(eval(elems[i][1]))
                {
                    window.alert(elems[i][2]);
                    focus();
                    return false;
                }
            }
        }
        return true;
    }
    //-->
    </SCRIPT>
            2、为form添加onsubmit属性:
               <form ... onsubmit='return frmValid(this)'>

        如果你感觉我的方法还行的话,那我欢迎你使用,呵呵……
    展开全文
  • 表单验证

    千次阅读 2006-04-28 13:37:00
    如何运用 Form 表单认证 ASP.NET 的安全认证,共有“Windows”“Form”“Passport”“None”四种验证模式。“Windows”与“None”没有起到保护的作用,不推荐使用;“Passport”我又没用过,唉……所以我只好讲讲...
  • 因为在用Vue 的ui库的时候修改样式不太方便,因此这次决定自己写表单,虽然用js可以实现表单的功能且不用考虑form到底怎么使用的。但是还是想学习一下表单,毕竟这个校验的弹框还挺好看的,hhhhh~ 首先浏览一下表单...
  • 7 Javascript:表单验证-非空验证

    千次阅读 2016-03-15 10:25:51
    表单提交前要检查数据的合法性在要对表单里的数据进行验证的时候,可以利用getElementById()来访问网页上任何一个元素 每个表单域都有一个form对象,可被传任何验证表单数据的函数(this.form)"/> function showIt...
  • jquery validate实现表单验证 (正则表达式)

    万次阅读 多人点赞 2016-08-03 20:01:24
    jquery validate结合正则表达式实现表单验证
  • javascript表单验证

    千次阅读 2013-01-18 13:22:10
    js验证表单大全 1. 长度限制 function test() { if(document.a.b.value.length>50) { alert("不能超过50个字符!"); document.a.b.focus(); return false; } } 2. 只能是汉字 3....
  • Web表单验证:最佳实践和教程

    千次阅读 2015-05-02 20:34:42
    理想情况下,用户将必要...这就是为什么我们要强调Web表单验证。Web表单验证的目的是保证用户顺利提交必要且格式正确的信息。在这篇文章中,我们将超越验证这一行为本身,来探寻不同的验证方式和错误反馈的技术和方法。
  • 表单验证ajax无刷新表单提交

    千次阅读 2011-10-25 14:12:15
    skygq表单验证和表单ajax提交合体版1.2效果展示   接下来我来总体说一下这款合体插件的一些特点吧: 将表单验证和ajax表单提交功能和在一起,这是非常方便的,而且功能很强大 虽然集成了这么强大的...
  • PHP 表单PHP 超全局变量 $_GET 和 $_POST 用于收集表单数据(form-data)。GET vs. POSTGET 和 POST 都...此数组包含键/值对,其中的键是表单控件的名称,而值是来自用户的输入数据。 GET 和 POST 被视作 GET和_GET
  • JS验证(网页设计中表单数据的验证)

    千次阅读 2007-06-25 13:21:00
    表单验证类 Validator v1.05 title >   < style > ...  body,td {...} { font : normal 12px Verdana ; color : #333333 }  input,textarea,select,td {...} { font : normal 12px Verdana ; color : #...
  • 今天我们一起来看看如何创建一个实用并且功能强大的表单表单使用如今最热门的技术HTML5和css3来创建,并且可以通过HTML5进行客户端验证。 查看预览下载附件 第一步:策划表单功能 首先,我们得为我们的...
  • HTML5 - 表单客户端验证

    千次阅读 2016-03-17 14:39:48
    过去对于客户端的表单验证,通常是使用JavaScript验证脚本,要么自己写,要么使用第三方库。而在HTML5中,提供了一套客户端验证方法,只需要在字段里嵌入常用的错误检查规则即可。1,required属性 - 表示字段不能为...
  • SpringMVC-表单验证

    千次阅读 2016-06-05 00:50:02
    1.mvc:annotation-driven 实际开发时建议都配置该参数。 ...RequestMappingHandlerAdapter,ExceptionHandlerExceptionResolver三个bean。 还将提供一下支持 -支持用ConversionServices实例对表单参数
  • 【PHP学习】表单验证实现注册功能

    千次阅读 2019-05-13 19:58:43
    上次学了一下最基本的语法,这次笔记中记录的是用上次学到的语法以及第一次的前端页面做表单验证,实现注册功能。 网页界面博客链接:PHP 学习之路(1)—— Simple Message 系统 基础语法博客链接:PHP 学习之路...
  • 读者可以使用两种方法让Struts2进行表单验证。本篇教程会讲解更为基础的方法,即验证过程放在Struts2的动作类之中。添加验证方法为了让Struts2 的动作类能够验证用户在Struts2 表单中的输入,读者必须在自己的动作类...
  • 把这个添加表单中。<div class="g-recaptcha" data-sitekey="6Lee1XAUAAAAAMjH4T6yMzgkq6iwdIurjfpYKBx0"></div> 用户提交表单之后。会有个名字是g-recaptcha-response的input框。提交到后台。 5、后端验证: ...
  • 简洁的表单验证程序

    2007-12-12 21:24:00
    导读: 第 1 页 简洁的表单验证程序 [1] 第 2 页 简洁的表单验证程序 [1] 验证规则参数: obj — 表单控件name minLength — 填写的字符串最小长度0意味着可以不填 而1意味着是必添 dataType — 验证格式 有 e-mail...
  • 网页中经常需要用到表单验证功能,以往需要写大量的代码来验证表单字段,而jQuery Tools提供了一套方便的表单验证工具,熟悉之后可以节省大量的开发时间。一、validator基本使用方法jQuery Tools validator插件为...
  • jQuery formValidator表单验证插件

    千次阅读 2008-10-28 12:56:00
    jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例 升级记录2008-07-22 14:47 bug描述:ajaxValidator函数在提交后发生错误,停留在本页面后,再次触发校验会让提示内容一直处于onload状态。这个bug已经...
  • JQuery FormValidator表单验证(转)

    千次阅读 2013-04-10 22:03:49
    JQuery FormValidator表单验证插件  2012-10-18 11:36:52| 分类: FormValidator | 标签:formvalidator  |字号大中小 订阅 1. jQuery formValidator能做什么,不能做什么?  jQuery ...
  • javaScript做form表单验证及特效

    千次阅读 2012-09-18 13:21:22
    网页中的注册都需要进行验证,来判断我们输入的格式是否是服务器要求的格式,如果能在服务器进行验证之前,先把一大部分输入格式不是所要求的筛选掉,那么就会大大的减轻服务器的压力。这就需要用到客户端验证,...
  • jQuery formValidator表单验证插件是什么?  jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你...
  • 关于表单提交,相信每个做过web开发的小伙伴,随随便便都能写出来。但是需求不同,采取的方法也... 在提交表单之前,对表单或者网页中的数据进行检验。onsubmit指定的方法返回true,则提交数据;返回false不提交数据。 j
  • ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug 。但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升。在开发...
  • 表单验证之PHP代码框架

    千次阅读 2005-08-23 22:24:00
    我在上一篇文章中讲到使用javascript做集成表单验证的方法,对于客户端验证已经足够,但好的表单验证应同时在客户端和服务器端进行——这正是写本文的目的。 如果采用一般的验证方法应该怎样写呢? if ($_POST...
  • jQuery formValidator是一个基于jQuery类库的表单验证插件,一个页面可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,只需要写一行代码就可以轻松实现许多脚本控制。目前支持5种大的校验方式,分别...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 46,378
精华内容 18,551
关键字:

给网页添加表单验证