jQuery最方便的前端验证方式2种(非空验证与比较验证)

简介: jQuery最方便的前端验证方式2种(非空验证与比较验证)

jQuery最方便的前端验证方式2种(非空验证与比较验证)


使用的jQuery地址:

https://code.jquery.com/jquery-3.4.1.min.js

在线版本的,方式测试。

验证需求:

1、非空验证

当用户没有输入用户名就提交的时候【阻止提交】并提示相应文字。

核心代码:

这里最核心的代码是取消form表单提交操作,这里不建议直接使用onSubmit事件,建议单独加载一遍,使用bind的方式加载事件。

$(function() {
        $("form").bind("submit", checkForm);
});
//用于做判断
function checkForm() {
    if (参数判断())
        return true;
    return false;
}

我们在if中逐一的添加想要判断的函数,使用对应的逻辑链接所有的函数返回值。

function checkUser() {
    if ($("#userName").val() == "") {
        $("#nameMsg").html("<font color='red'>用户名不能为空!!</font>");
        $("#userName").focus();
        return false;
    } else {
        $("#nameMsg").html("");
        return true; // 验证通过
    }
}

完整示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <form action="index.html" method="get">
        <input type="text" id="userName" placeholder="请输入用户名" /><span id="nameMsg"></span>
        <hr/>
        <input type="submit" value="提交验证" />
    </form>
    <script type="text/javascript">
        $(function() {
            $("form").bind("submit", checkForm);
        });
        function checkForm() {
            if (checkUser())
                return true;
            return false;
        }
        function checkUser() {
            if ($("#userName").val() == "") {
                $("#nameMsg").html("<font color='red'>用户名不能为空!!</font>");
                $("#userName").focus();
                return false;
            } else {
                $("#nameMsg").html("");
                return true; // 验证通过
            }
        }
        
    </script>
</body>
</html>

2、比较验证

比较验证就是比较两个字符串是否相同,一般用于比较两次密码是否输入相同,很常见,也很常用。

jQuery验证列表

字符串长度限制、判断字符长度 、js 限制输入、限制不能输入、textarea 长度限制

源码

<script>
    function test() {
        if (document.a.b.value.length > 50) {
            alert("不能超过 50 个字符!");
            document.a.b.focus();
            return false;
        }
    }
</script>
<form name="a" onsubmit="return test()">
    <textarea name="b" cols="40" wrap="VIRTUAL" rows="6"></textarea>
    <input type="submit" name="Submit" value="check">
</form>

判断汉字、判断是否汉字 、只能输入汉字

<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" />

判断是否输入英文、只能输入英文

<input onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')" />

只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字

<input onkeyup="this.value=this.value.replace(/\D/g,'')" />

只能输入2位小数的浮点数

<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />

只能输入英文字符和数字

<input onkeyup="value=value.replace(/[d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[d]/g,''))" maxlength=10 name="Numbers">
相关文章
|
5月前
|
设计模式 JavaScript 前端开发
|
6月前
|
前端开发 测试技术
【前端验证】记录将发包量作为传参以加速debug的环境优化记录
【前端验证】记录将发包量作为传参以加速debug的环境优化记录
|
6月前
|
前端开发 Python
【前端验证】通用型顺序比对的uvm scoreboard组件编写
【前端验证】通用型顺序比对的uvm scoreboard组件编写
|
3月前
|
JavaScript 数据安全/隐私保护
jquery正则表达式验证手机号密码和姓名字段
jquery正则表达式验证手机号密码和姓名字段
|
4月前
|
canal 算法 前端开发
前端算法专栏-数组-125. 验证回文串
前端算法专栏-数组-125. 验证回文串
166 0
|
4月前
|
JavaScript 前端开发 UED
前端知识笔记(四)———JQuery 自动刷新页面但不闪烁的实现方法
前端知识笔记(四)———JQuery 自动刷新页面但不闪烁的实现方法
42 0
|
5月前
|
JavaScript 新能源
jQuery验证车牌号(含新能源车牌)
jQuery验证车牌号(含新能源车牌)
24 1
|
5月前
|
JavaScript
jQuery鼠标离焦验证手机号码
jQuery鼠标离焦验证手机号码
12 0
|
5月前
|
JavaScript
jQuery验证身份证号码
jQuery验证身份证号码
24 0
|
5月前
|
前端开发 JavaScript
Jquery前端分页插件pagination同步加载和异步加载
Jquery前端分页插件pagination同步加载和异步加载
42 0