0
点赞
收藏
分享

微信扫一扫

jQuery前端基本验证(一)

江南北 2022-11-10 阅读 111
jquery用户名html虚拟化云计算


“两个蝴蝶飞”特别喜欢"​​java1234知识分享网​​​"小峰的实用主义，所以本文及其系列文章均是采用实用主义，从项目和代码的角度去分析。由于本人经验有限，嘴皮子不溜，所以学术性，概念性，底层性的知识点暂时不做介绍。文章中有错误之处，欢迎拍砖和指点。有的资料大部分是两者提供，为了方便书写，故不一一指名出处，请谅解，非常抱歉。

这是最下面的一章,没有了，​​跳转到主页​​

 

前端验证非常的重要，可以减轻服务器端的压力。这里讲一个很基本的验证操作。

一  编写前端页面

在register.jsp页面中:  注意相应的输入Input框与对应的span标签有一定的联系。 span标签=input+"Title"

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>前端验证</title>
</head>
<body>
     <form action="#" method="post" id="myform">
            <p>
                <label for="userName">通行证用户名：</label>
                <input type="text" id="userName" size="13px"><i>@163.com</i><span id="userNameTitle" style="margin-left:19px">请输入4-12位用户名（首位为字母）</span>
            </p>
            <p>
                <label for="password">登录密码：</label>
                <input type="password" id="password"><span id="passwordTitle">密码为6-16位</span>
            </p>
            <p>
                <label for="repassword">重复登录密码：</label>
                <input type="password" id="repassword"><span id="repasswordTitle">请再次输入密码</span>
            </p>
            <p>
            <label for="tel">关联手机号:</label>
            <input type="text" id="tel"><span id="telTitle">请输入关联手机号</span>
            </p>
            <p>
                <label for="email">保密邮箱：</label>
                <input type="text" id="email"><span id="emailTitle">请输入保密邮箱</span>
            </p>
            <p class="button">
                <input type="submit" value="注册"/>
                <input type="reset" value="清空"/>
            </p>
        </form>
</body>
</html>

二   利用CSS简单美化一下页面,添加相应的样式

<!-- 定义样式 -->
<style>
   .success
        {
            background-image: url("Plugins/checked.gif");
            background-color:#E6FEE4;
            border-color:#01BE00;
            background-repeat: no-repeat;
            background-position: left 2px;
            padding:0 18px;
        }
        .danger
        {
            background-image: url("Plugins/unchecked.gif");
            background-color:#FFF2E5;
            border-color:#FF3300;
            background-repeat: no-repeat;
            background-position: left 2px;
            padding:0 18px;
        }
         label
        {
            width: 150px;
            height: 30px;
            line-height: 30px;
            text-align: right;
            font-size: 14px;
            display: inline-block;
        }
        span
        {
            background-color:#FFFFDA ;
            border: 1px solid #FFCD00;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            display: inline-block;
            margin-left: 40px ;

        }
        .button
        {
            margin-left: 159px;
            border: dashed 1px transparent;
            background-color: transparent;
            cursor: pointer;
        }
</style>

三   定义一个Plugins插件文件夹，里面放置Jquery库和正确和错误的图片

目录结构为:

jQuery前端基本验证(一)_html

引入相应的Jquery插件库

<!-- 引入Jquery标签库 -->
<script src="Plugins/jquery-1.7.2.js"></script>

四  定义用户名的相关验证

在jquery操作中，所有的验证都是在鼠标移出输入框时进行相应的验证，这也是实时的验证。 用的是Jquery中的mouseleave()方法。

jquery中添加

$(function(){
    //对用户名进行相应的验证.
    $("#userName").mouseleave(function(){
      userNameValidate();
    });
});

注意相应的方法为，id名称+Validate;

JS中添加:

//用户名的相关验证
  function userNameValidate(){
    //先判断是否为空
    var value=$("#userName").val();
    if(value.length==0)
        {
            $("#userNameTitle").text('通行证用户名不能为空');
            $("#userNameTitle").removeClass('success').addClass('danger');
            return false;
        }
    //定义正则表达式
        var pattern=/^[A-Za-z][A-Za-z0-9]{3,11}$/;
        if(!pattern.test(value))
        {
            $("#userNameTitle").text('通行证用户名格式错误，请重新输入');
            $("#userNameTitle").removeClass('success').addClass('danger');
            return false;
        }else{
           $("#userNameTitle").text('通行证用户名输入正确');
             $("#userNameTitle").removeClass('danger').addClass('success');
             return true;
        }  
  }

五   定义密码的相关验证

也同样放在jquery 方法里面。

jquery中添加

//对密码进行验证
    $("#password").mouseleave(function(){
      passwordValidate();
    });

 JS中添加，相关验证为:

//密码的相关验证
  function passwordValidate(){
    //先判断是否为空
    var value=$("#password").val();
    if(value.length==0)
        {
            $("#passwordTitle").text('密码不能为空');
            $("#passwordTitle").removeClass('success').addClass('danger');
            return false;
        }
    //定义正则表达式
        var pattern=/^[A-Za-z0-9]{6,16}$/;
        if(!pattern.test(value))
        {
            $("#passwordTitle").text('密码不符合格式，请重新输入');
            $("#passwordTitle").removeClass('success').addClass('danger');
            return false;
        }else{
           $("#passwordTitle").text('密码输入正确');
             $("#passwordTitle").removeClass('danger').addClass('success');
             return true;
        }
  }

六   重复密码的相关验证

jquery中添加

//对重复密码进行验证
    $("#repassword").mouseleave(function(){
      repasswordValidate();
    });

js中添加相应的验证方法为:

//重复密码的相关验证
  function repasswordValidate(){
    //先判断是否为空
    var value=$("#repassword").val();
    if(value.length==0)
        {
            $("#repasswordTitle").text('重复密码不能为空');
            $("#repasswordTitle").removeClass('success').addClass('danger');
            return false;
        }
    //判断值是否相同
        if(!(value==$("#password").val()))
        {
            $("#repasswordTitle").text('两次输入的密码不一致，请重新输入');
            $("#repasswordTitle").removeClass('success').addClass('danger');
            return false;
        }else{
           $("#repasswordTitle").text('两次密码一致');
             $("#repasswordTitle").removeClass('danger').addClass('success');
             return true;
        }
  }

七  手机号的相关验证

Jquery中添加

//对手机号进行相应的验证
    $("#tel").mouseleave(function(){
      telValidate();
    });

 JS中添加

//手机号的相关验证
  function telValidate(){
    //先判断是否为空
    var value=$("#tel").val();
    if(value.length==0)
        {
            $("#telTitle").text('手机号不能为空');
            $("#telTitle").removeClass('success').addClass('danger');
            return false;
        }
    //判断值是否相同
        var pattern=/^1[34578]\d{9}$/;
        if(!pattern.test(tel.value))
        {
            $("#telTitle").text('手机号码格式错误，请重新输入');
            $("#telTitle").removeClass('success').addClass('danger');
            return false;
        }else{
           $("#telTitle").text('手机号输入正确');
             $("#telTitle").removeClass('danger').addClass('success');
             return true;
        }
  }

八  邮箱的相关验证

Jquery中添加

//对邮箱进行相应的验证
    $("#email").mouseleave(function(){
      emailValidate();
    });

 JS中添加

//邮箱的相关验证
  function emailValidate(){
    //先判断是否为空
    var value=$("#email").val();
    if(value.length==0)
        {
            $("#emailTitle").text('邮箱不能为空');
            $("#emailTitle").removeClass('success').addClass('danger');
            return false;
        }
    //判断值是否相同
        var pattern=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if(!pattern.test(tel.value))
        {
            $("#emailTitle").text('邮箱格式错误，请重新输入');
            $("#emailTitle").removeClass('success').addClass('danger');
            return false;
        }else{
           $("#emailTitle").text('邮箱输入正确');
             $("#emailTitle").removeClass('danger').addClass('success');
             return true;
        }
  }

九  重启服务器，进行相关的前端验证

如果没有输入值，则提示:

jQuery前端基本验证(一)_html_02

输入的值格式不正确，则提示:

jQuery前端基本验证(一)_jquery_03

 输入的值格式正确，则提示:

jQuery前端基本验证(一)_jquery_04

输入的值继续错误时，则提示:

jQuery前端基本验证(一)_html_05

 正确与错误可以实现随时转换，如果正确，则显示对号的图片，如果错误，则显示错误的图片。

但还是有一个问题，即使错误了，当点击提交按钮时，仍然可以提交。

十  添加提交验证

在form表单里，添加一个onsubmit的方法:

<form action="#" method="post" id="myform" onsubmit="return formValidate()">

在JS中添加:

function formValidate(){
    return userNameValidate()&&passwordValidate()&&repasswordValidate()
    &&telValidate()&&emailValidate();
  }

这时重启服务器，进行相应的判断。

jQuery前端基本验证(一)_用户名_06

 有错误时，是无法进行提交的。

当全部正确时，才可以进行提交。

jQuery前端基本验证(一)_用户名_07

这里，才可以正确的进行提交。

十一总结

这种方式的验证，过程虽然简单，都是先写出一个，然后一个个ctrl+c,ctrl+v, 但是这种方式太冗余了，而且不易于快速修改。

提示的页面也不太好看，每写一个页面，都要这样重复的进行判断。需要渐渐的去优化一下。

十二   JS验证的代码

<!-- 引入Jquery标签库 -->
<script src="Plugins/jquery-1.7.2.js"></script>
<script>
  $(function(){
    //对用户名进行相应的验证.
    $("#userName").mouseleave(function(){
      userNameValidate();
    });
    //对密码进行验证
    $("#password").mouseleave(function(){
      passwordValidate();
    });
    //对重复密码进行验证
    $("#repassword").mouseleave(function(){
      repasswordValidate();
    });
    //对手机号进行相应的验证
    $("#tel").mouseleave(function(){
      telValidate();
    });
    //对邮箱进行相应的验证
    $("#email").mouseleave(function(){
      emailValidate();
    });
  })
  //用户名的相关验证
  function userNameValidate(){
    //先判断是否为空
    var value=$("#userName").val();
    if(value.length==0)
        {
            $("#userNameTitle").text('通行证用户名不能为空');
            $("#userNameTitle").removeClass('success').addClass('danger');
            return false;
        }
    //定义正则表达式
        var pattern=/^[A-Za-z][A-Za-z0-9]{3,11}$/;
        if(!pattern.test(value))
        {
            $("#userNameTitle").text('通行证用户名格式错误，请重新输入');
            $("#userNameTitle").removeClass('success').addClass('danger');
            return false;
        }else{
           $("#userNameTitle").text('通行证用户名输入正确');
             $("#userNameTitle").removeClass('danger').addClass('success');
             return true;
        }  
  }
  //密码的相关验证
  function passwordValidate(){
    //先判断是否为空
    var value=$("#password").val();
    if(value.length==0)
        {
            $("#passwordTitle").text('密码不能为空');
            $("#passwordTitle").removeClass('success').addClass('danger');
            return false;
        }
    //定义正则表达式
        var pattern=/^[A-Za-z0-9]{6,16}$/;
        if(!pattern.test(value))
        {
            $("#passwordTitle").text('密码不符合格式，请重新输入');
            $("#passwordTitle").removeClass('success').addClass('danger');
            return false;
        }else{
           $("#passwordTitle").text('密码输入正确');
             $("#passwordTitle").removeClass('danger').addClass('success');
             return true;
        }
  }
  //重复密码的相关验证
  function repasswordValidate(){
    //先判断是否为空
    var value=$("#repassword").val();
    if(value.length==0)
        {
            $("#repasswordTitle").text('重复密码不能为空');
            $("#repasswordTitle").removeClass('success').addClass('danger');
            return false;
        }
    //判断值是否相同
        if(!(value==$("#password").val()))
        {
            $("#repasswordTitle").text('两次输入的密码不一致，请重新输入');
            $("#repasswordTitle").removeClass('success').addClass('danger');
            return false;
        }else{
           $("#repasswordTitle").text('两次密码一致');
             $("#repasswordTitle").removeClass('danger').addClass('success');
             return true;
        }
  }
  //手机号的相关验证
  function telValidate(){
    //先判断是否为空
    var value=$("#tel").val();
    if(value.length==0)
        {
            $("#telTitle").text('手机号不能为空');
            $("#telTitle").removeClass('success').addClass('danger');
            return false;
        }
    //判断值是否相同
        var pattern=/^1[34578]\d{9}$/;
        if(!pattern.test(tel.value))
        {
            $("#telTitle").text('手机号码格式错误，请重新输入');
            $("#telTitle").removeClass('success').addClass('danger');
            return false;
        }else{
           $("#telTitle").text('手机号输入正确');
             $("#telTitle").removeClass('danger').addClass('success');
             return true;
        }
  }
  //邮箱的相关验证
  function emailValidate(){
    //先判断是否为空
    var value=$("#email").val();
    if(value.length==0)
        {
            $("#emailTitle").text('邮箱不能为空');
            $("#emailTitle").removeClass('success').addClass('danger');
            return false;
        }
    //判断值是否相同
        var pattern=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if(!pattern.test(value))
        {
            $("#emailTitle").text('邮箱格式错误，请重新输入');
            $("#emailTitle").removeClass('success').addClass('danger');
            return false;
        }else{
           $("#emailTitle").text('邮箱输入正确');
             $("#emailTitle").removeClass('danger').addClass('success');
             return true;
        }
  }
  function formValidate(){
    return userNameValidate()&&passwordValidate()&&repasswordValidate()
    &&telValidate()&&emailValidate();
  }
</script>

谢谢!!!

 

 

 

 

举报

相关推荐

jQuery前端基本验证(三)

jquery自定义html虚拟化云计算

jQuery前端基本验证(二)

icobootstrapjquery虚拟化云计算

jQuery 密码验证和深入理解JSONP【前端jQuery框架】

json数据htmljQuery前端开发yyds干货盘点

jQuery validate 验证

php

jquery validate 表单验证

javascriptViewUIgitListideJavaScript前端开发

jQuery 验证email格式

jQueryOpenStack云计算

jQuery一些基本知识

jquery

jquery基本动画

javascript

JQuery 基本使用

JavaWebJQuery基本使用选择器jqueryhtml

jQuery基本动画

centoslinux运维
0 条评论