关于表单（输入）常用的验证

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于表单（输入）常用的验证相关的知识，希望对你有一定的参考价值。

现在输入经常通过ajax提交，所以我也没有直接写表单的验证。凡是输入其实都是可以验证的。说到验证，我们习惯于在输入之后马上就能返回结果，在这一点上ajax能有不错的效果。但是大部分验证并不需要通过数据库底层的操作，仅是对输入的数据做格式和字符上的限制。用ajax太大材小用了。我们这里给每个输入框一个onChange事件监听，当焦点移开输入框时立马能得到反馈

下面看代码

1、html代码

<%@ 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">
<link rel="stylesheet" type="text/css" href="css/navigation.css">
<link rel="stylesheet" type="text/css" href="css/bottom.css">
<link rel="stylesheet" type="text/css" href="css/register.css">
<script type="text/javascript" src="script/jquery-3.2.1.js"></script>
<script type="text/javascript" src="script/register.js"></script>
<title>用户注册</title>
</head>
<script type="text/javascript">


</script>
<body>
<%@include file="common/navigation.jsp" %>
<div id="mainId">
    <div id="registerId">
        <label class="registerHead">用户注册</label>
        <label for="usernameId">用户名</label>
        <input id="usernameId" type="text" name="username" onchange="checkUsername()"/>
        <br/>
        <span id="usernameTipId"></span>
        <br/>
        <label for="passwordId">密码</label>
        <input id="passwordId" type="password" name="password" onchange="checkPassword()"/>
        <br/>
        <span id="passwordTipId"></span>
        <br/>
        <label for="password2Id">密码确认</label>
        <input id="password2Id" type="password" name="password2" onchange="checkPassword2()"/>
        <br/>
        <span id="password2TipId"></span>
        <br/>
        <label for="e_mailId">邮箱</label>
        <input id="e_mailId" type="text" name="e_mail" onchange="checkEmail()"/>
        <br/>
        <span id="e_mailTipId"></span>
        <br/>
        <label for="phoneId">手机号码</label>
        <input id="phoneId" type="text" name="phone" onchange="checkPhone()"/>
        <br/>
        <span id="phoneTipId"></span>
        <br/>
        <input class="button" type="button" value="注册"/>
        <span id="loginLinkId"><a href="login.jsp">已有账号，速度登录--></a></span>
    </div>    
</div>
<%@include file="common/bottom.jsp" %>
</body>
</html>

2、JS代码

function checkUsername()
{
    var username = document.getElementById("usernameId").value;
    var usernameTip = document.getElementById("usernameTipId");
    var nameRegex=/^[^@# ]{3,16}$/;
    if(username == "")
    {
        usernameTip.innerHTML="× 用户名不能为空，应为3-16个字符";
        return false;
    }
    else if(!nameRegex.test(username))
    {
        usernameTip.innerHTML="× 用户名为3~16个字符，且不能包含”@”、空格和”#”字符";
        return false;
    }else
    {
        usernameTip.innerHTML="√ 用户名输入正确"
        return true;
    }

}

function checkPassword()
{
    var password = document.getElementById("passwordId").value;
    var passwordTip = document.getElementById("passwordTipId");
    var passwordRegex=/^[^@# ]{8,20}$/;
    if(password == "")
    {
        passwordTip.innerHTML=" × 密码不能为空";
        return false;
    }else  if(!passwordRegex.test(password))
    {
        passwordTip.innerHTML="× 密码为8~20个字符，且不能包含”@”、空格和”#”字符";
        return false;
    }else
    {
        passwordTip.innerHTML="√ 密码输入正确";
        return true;
    }

}
function checkPassword2()
{
    var password = document.getElementById("passwordId").value;
    var password2 = document.getElementById("password2Id").value;
    var password2Tip = document.getElementById("password2TipId");
    if(password2 != password)
    {
        password2Tip.innerHTML=" × 两次密码输入不一致";
        return false;
    }else
    {
        password2Tip.innerHTML=" √ 输入正确";
        return true;
    }

}
function checkPhone()
{
    var phone = document.getElementById("phoneId").value;
    var phoneTip = document.getElementById("phoneTipId");
    var phoneRegex=/^1\\d{10}$/;
    if(!phoneRegex.test(phone))
    {
        phoneTip.innerHTML=" × 手机号码错误！";
        return false;
    }else
    {
        phoneTip.innerHTML=" √ 输入正确";
        return true;
    }
}
function checkEmail()
{
    var e_mail = document.getElementById("e_mailId").value;
    var e_mailTip = document.getElementById("e_mailTipId");
    var emailRegex=/^(\\w-*\\.*)[email protected](\\w-?)+(\\.\\w{2,})+$/;    
    if(!emailRegex.test(e_mail))
    {
        e_mailTip.innerHTML=" × 邮箱输入错误！";
        return false;
    }else
    {
        e_mailTip.innerHTML=" √ 输入正确";
        return true;
    }
}
function checkdata()
{
    if(checkUsername()&&checkPassword()&&checkPassword2()&&checkPhone()&&checkEmail())
    {
        return true;
    }
    else return false;
}

下面是一些效果。页面用到的CSS文件我就不贴了

输入正确的例子

技术分享

反面教材

技术分享

 

以上是关于关于表单（输入）常用的验证的主要内容，如果未能解决你的问题，请参考以下文章

原生JavaScript判断是否为邮箱危险字符验证长度验证网址验证小数整数浮点数等常用的验证

关于JS中的常用表单验证+正则表达式

常用表单验证规则

vue elementUI表单的常用校验

jquery里正则的使用方法及常用的正则验证

关于js----------------分享前端开发常用代码片段