jQuery最方便的前端验证方式2种(非空验证与比较验证)
使用的jQuery地址：
在线版本的，方式测试。
验证需求：
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">
