<!--
    需求：
        用户注册页面要有用户名、密码、确认密码、邮箱
        用户名文本框：用户名不能为空，且必须为数字与字母的6到12位的组合
        密码框：密码不能为空，六到八位数字或字母的组合
        确认密码框：确认密码不能为空，六到八位数字或字母的组合，并且庶和密码框中的内容保持一致
        邮箱框：邮箱需要输入正确的邮箱格式并且不能为空
-->

效果图：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>JQUERY</title>
    <script src="jquery-3.3.1.js"></script>
</head>
<fieldset>
    <legend>用户注册页面</legend>
    <form>
        <table>
            <tr>
                <td>用户名:</td>
                <td><input type="text" id="username"></td>
                <td>
                    <div id="usernameTip"></div>
                </td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" id="pwd"></td>
                <td>
                    <div id="pwdTip"></div>
                </td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" id="rePwd"></td>
                <td>
                    <div id="rePwdTip"></div>
                </td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input type="email" id="user_email" /></td>
                <td>
                    <div id="emailTip"></div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" id="button" value="submit" ></td>
                <td></td>
            </tr>
        </table>
    </form>
</fieldset>
<body>
</body>

</html>
<script type="text/javascript">

    function userNameJudge() {判断用户名输入是否合法
        var reg = /^[A-Za-z0-9]{6,12}$/;
        if (!$("#username").val()) {//判断用户名不能为空
            $("#usernameTip").text("用户名不能为空.").css({
                "color": "red",
                "font-weight": "bold"
            });
            return false;
        } else if (!reg.test($("#username").val())) {
            $("#usernameTip").text("用户名格式错误.").css({
                "color": "red",
                "font-weight": "bold"
            });
            return false;
        } else {
            $("#usernameTip").text("用户名格式正确.").css({
                "color": "green",
            });
            return true;
        }
    }

    function pwdJudge() {//判断密码框输入是否合法
        var reg = /^[0-9a-zA-Z]{6,8}$/;
        if (!$("#pwd").val()) {
            $("#pwdTip").text("密码不能为空.").css({
                "color": "red",
                "font-weight": "bold"
            });
            return false;
        } else if (!reg.test($("#pwd").val())) {
            $("#pwdTip").text("密码格式错误，请重新输入.").css({
                "color": "red",
                "font-weight": "bold"
            });
            return false;
        } else {
            $("#pwdTip").text("密码格式正确.").css({
                "color": "green"
            });
            return true;
        }
    }

    function rePwdJudge() {判断确认密码框输入是否合法
        var reg = /^[0-9a-zA-Z]{6,8}$/;
        if (!$("#rePwd").val()) {
            $("#rePwdTip").text("密码不能为空.").css({
                "color": "red",
                "font-weight": "bold"
            });
            return false;
        } else if (!reg.test($("#rePwd").val())) {
            $("#rePwdTip").text("密码格式错误，请重新输入.").css({
                "color": "red",
                "font-weight": "bold"
            });
            return false;
        } else if ($("#pwd").val() != $("#rePwd").val()) {
            $("#rePwdTip").text("两次输入密码不一致.").css({
                "color": "red",
                "font-weight": "bold"
            });
            return false;
        } else {
            $("#rePwdTip").text("确认密码格式正确.").css({
                "color": "green"
            });
            return true;
        }
    }

    function emailJudge() {//判断邮箱输入是否合法
        var reg=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
        if (!$("#user_email").val()) {
            $("#emailTip").text("邮箱不能为空.").css({
                "color": "red",
                "font-weight": "bold"
            });
            return false;
        } else if(!reg.test($("#user_email").val())){//补充说明：.indexOf("@")<0可判断字符串中是否包含指定内容，这里的指定内容是@
            $("#emailTip").text("请输入正确的邮箱格式.").css({
                "color": "red",
                "font-weight": "bold"
            });
            return false;
        }else {
            $("#emailTip").text("邮箱正确.").css({
                "color": "green"
            });
            return true;
        }
    }

    /*
   *用户名不能为空，且必须为数字或字母的6到8位的组合
    */
    $("#username").focus(function () {
        $("#usernameTip").text("用户名只能为6到12位英文或数字的组合.").css({
            "color": "green"
        });
    }).blur(userNameJudge);

    /*
    *密码不能为空，六到八位数字或字母的组合
     */
    $("#pwd").focus(function () {
        $("#pwdTip").text("密码为六到八位数字或字母的组合.").css({
            "color": "green"
        });
    }).blur(pwdJudge);

    /*
    *确认密码不能为空，六到八位数字或字母的组合，并且庶和密码框中的内容保持一致
     */
    $("#rePwd").focus(function () {
        $("#rePwdTip").text("密码为六到八位数字或字母的组合.").css({
            "color": "green"
        });
    }).blur(rePwdJudge);

    /*
    *邮箱需要输入正确的邮箱格式并且不能为空
     */
    $("#user_email").focus(function () {
        $("#emailTip").text("请输入正确的邮箱格式.").css({
            "color": "green"
        });
    }).blur(emailJudge);

    //提交按钮，若是所有文本款的内容都是正确格式则提交，否则不提交
    $("#button").click(function () {
        if (userNameJudge() && pwdJudge() && rePwdJudge()&& emailJudge() ) {
            alert("验证成功");
        } else {
            alert("验证失败");
        }
    });

</script>

JQUERY之表单验证案例的更多相关文章

  1. jQuery表单验证案例

    目标:使用jQuery进行表单验证. 功能:1.必填选项后面添加了红色小星星: 2.选中开始输入时,输入文本框会改变当前背景色,增强用户体验: 3.输入的时候就开始验证,当输入格式正确就会提醒,就是当 ...

  2. 使用jquery插件validate制作的表单验证案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  4. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  5. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  6. Jquery Validate 表单验证的多种方式

    ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...

  7. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  8. JavaScript 表单验证 案例

    JavaScript 表单验证 案例 版权声明:未经授权,严禁转载!   编写 HTML 文件,搭建主体界面 <html> <head> <meta charset=&q ...

  9. jquery实现表单验证简单实例

    /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...

随机推荐

  1. RK3399 友善NanoPC-T4开发板使用sysfs方法控制status LED状态灯-【申嵌视频-RK3399篇】

    实验1:sysfs 操作方法控制NanoPC-T4开发板上LED灯 (status LED状态灯:GPIO0_B5/LED1_OUT)root@NanoPC-T4: cd /sys/class/led ...

  2. Win32-Application的窗口和对话框

    Win32 Application,没有基于MFC的类库,而是直接调用C++接口来编程. 一.弹出消息窗口 (1)最简单的,在当前窗口中弹出新窗口.新窗口只有“YES”按钮. int APIENTRY ...

  3. ECMA6 New Features

    花了一些时间把ECMA6的新特性进行了回顾,给自己建立了思维索引,大部分内容借鉴了阮一峰大神的博客. refers: http://es6.ruanyifeng.com/#docs/arraybuff ...

  4. thinkphp框架 的 链接数据库和操作数据

    框架有时会用到数据库的内容,在"ThinkPhp框架知识"的那篇随笔中提到过,现在这篇随笔详细的描述下. 一.链接数据库 (1)找到模块文件夹中的Conf文件夹,然后进行编写con ...

  5. python生成linux命令行工具

    您是否也曾一直想生成类似cd, cat等小巧/迷人/实用的小工具作为系统命令或者将python程序打包为exe进行分发?ok,机会来了.利用python 的argparse 和 pyinstaller ...

  6. sas 9.4 sid 64bit 到期时间210804 带有EM

    PROC SETINIT RELEASE='9.4';SITEINFO NAME='NATIONAL PINGTUNG UNI OF SCIENCE&TECH'SITE=12001462 OS ...

  7. 决策树（decision tree）

    决策树是一种常见的机器学习模型.形象地说,决策树对应着我们直观上做决策的过程:经由一系列判断,得到最终决策.由此,我们引出决策树模型. 一.决策树的基本流程 决策树的跟节点包含全部样例,叶节点则对应决 ...

  8. Python 递归的练习

    递归的练习 递归的了解实例 # 定义一个类(num是需要给出的参数) # 一定要有临界值 # 要有递推的关系 def digui(num): # 打印num print('$'+str(num)) # ...

  9. java生成简单验证码图片

    概要 最近项目需要用java实现输出随机验证码图片到前台,正好有机会接触下java的绘图类,完成需求后也有时间做个总结,写篇随笔记录下也希望能帮助到有同样需求的人! 需求流程图 1．生成随机数 在ja ...

  10. C#生成缩略图,C#给图片添加水印

    生成缩略图 #region 生成缩略图 /// <summary> /// 生成缩略图 /// </summary> /// <param name="orig ...