基于jquery，自己编写的基本验证

最新推荐文章于 2021-09-07 08:21:00 发布

永远依样

最新推荐文章于 2021-09-07 08:21:00 发布

阅读量281

点赞数

本文链接：https://blog.csdn.net/h15766509632/article/details/63683662

版权

前言：感觉像小学生望莫吐槽，网上有一大堆的前端验证框架：jquery-validation、parsley http://www.bootcdn.cn/parsley.js/

=================页面Demo===========================

<!DOCTYPE HTML>

<html>
<meta charset="UTF-8">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/jscript"></script>
<script src="myValidateUtil.js" type="text/jscript"></script>
<script type="text/jscript">
$(document).ready(function(e) {
$("#btn").click(function(){
//myValid();

});
});
</script>
</head>
<body>
<form action="http://www.baidu.com" class="myValidateForm">
<ul>
<li><span class="star">*</span>姓名<input type="text" class="textRequired"/><span class="textError">必填信息</span></li>
<li><span class="star">*</span>年龄<input type="text" class="textRequired"/><span class="textError">必填信息</span></li>
<li><span class="star">*</span>性别<input type="text" class="textRequired"/><span class="textError">必填信息</span></li>
<li><span class="star">*</span>邮箱<input type="text" class="textRequired"/><span class="textError">必填信息</span></li>
<li><span class="star">*</span>地址<input type="text" class="textRequired"/><span class="textError">必填信息</span></li>
<li>年级
<select class="selectRequired">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select><span class="textError">必选项<span>
</li>
<li>
是<input type="radio" name="yes_no" class="radioRequired" value="1"/>
否<input type="radio" name="yes_no" class="radioRequired" value="0"/>
<span class="textError">至少选择一项<span>
</li>
<li>
苹果<input type="checkbox" class="checkboxRequired" value="1"/>
香蕉<input type="checkbox" class="checkboxRequired" value="0"/>
梨<input type="checkbox" class="checkboxRequired" value="0"/>
<span class="textError">至少选择一项<span>
</li>
</ul>
<input type="submit" value="提交" id="btn"/>
</form>
</body>
</html>

==========================js内容====基于jquery=======================================================

$(function(){
//错误提示样式
if (typeof($(".textError")) != "undefined") {
$(".textError").css({"display":"none","font-size":"12px","font-family":"楷体","color":"#F00","margin-left":"10px"});
}
if (typeof($(".star")) != "undefined") {
$(".star").css({"font-size":"12px","color":"#F00","margin-right":"5px"});
}
//输入框
if (typeof($(".textRequired")) != "undefined") {
$(".textRequired").blur(function(){
if($(this).val()==""){
$(this).next(".textError").show();
}else{
$(this).next(".textError").hide();
}
});
}
//下拉框
if (typeof($(".selectRequired")) != "undefined") {
$(".selectRequired").change(function(){
if($(this).val()==""){
$(this).next(".textError").show();
}else{
$(this).next(".textError").hide();
}
});
}
//单选按钮
if (typeof($(".radioRequired")) != "undefined") {
$(".radioRequired").click(function(){
$(".radioRequired").next(".textError").hide();
});
}
//多选按钮
if (typeof($(".checkboxRequired")) != "undefined") {
$(".checkboxRequired").click(function(){
if($(this).is(":checked")){
$(".checkboxRequired").next(".textError").hide();
}else{
checkboxRequired();
}
});
}
//form表单提交
if (typeof($(".myValidateForm")) != "undefined") {
$(".myValidateForm").submit(function(){
return myValid();
});
}
});
/**
* myValid()
*验证方法(用于自定义事件执行验证：单击事件等)
*/
function myValid(){
var flag = true;
if (typeof(flag) != "undefined") {
flag = inTextRequired();
}
if (typeof(flag) != "undefined") {
flag = inSelectRequired();
}
if (typeof(flag) != "undefined") {
flag = radioRequired();
}
if (typeof(flag) != "undefined") {
flag = checkboxRequired();
}
if(flag){
$(".textError").hide();
}
return flag;
}
/**
*输入框验证
*/
function inTextRequired(){
var flag = true;
$(".textRequired").each(function(index, element) {
if($(element).val()==""){
$(element).next(".textError").show();
flag = false;
}
});
return flag;
}

/**
*下拉框验证
*/
function inSelectRequired(){
var flag = true;
if($(".selectRequired").val()==""){
$(".selectRequired").next(".textError").show();
flag = false;
}
return flag;
}
/**
*单选按钮验证
*/
function radioRequired(){
var flag = false;
$(".radioRequired").each(function(index, element) {
if($(element).is(":checked")){
flag = true;
}else{
$(".radioRequired").next(".textError").show();
}
});
if(flag){
$(".radioRequired").next(".textError").hide();
}
return flag;
}

/**
*多选按钮验证
*/
function checkboxRequired(){
var flag = false;
$(".checkboxRequired").each(function(index, element) {
if($(element).is(":checked")){
flag = true;
}else{
$(".checkboxRequired").next(".textError").show();
}
});
if(flag){
$(".checkboxRequired").next(".textError").hide();
}
return flag;
}

/**
*验证手机号
*/
function isPhoneNum(str){
var regphone = /(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;//手机号码正则2016最新
var result = regphone.test(str);
return result;
}

/**
*验证邮箱
*/
function isEmail(str){
var regEmail = /^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.){1,4}[a-z]{2,3}$/;//邮箱正则
var result = regEmail.test(str);
return result;
}

/**
*验证是否是数值（包含正负和小数点、零）
*/
function isNum(str){
var regNum = /^-?[1-9]*(\.\d*)?$|^-?0(\.\d*)?$/;
var result = regNum.test(str);
return result;
}

/**
*验证是否是整数
*/
function isInt(str){
var regInt = /^0$|^[1-9]\d*$/; //整数的正则表达式
var result = regInt.test(str);
return result;
}

/**
*验证身份证号15位或18位
*/
function isCard(str){
var regCard = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
var result = regCard.test(str);
return result;
}

永远依样

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于jquery，自己编写的基本验证

前言：感觉像小学生望莫吐槽，网上有一大堆的前端验证框架：jquery-validation、parsley http://www.bootcdn.cn/parsley.js/=================页面Demo=========================== $(document).ready(function
复制链接

扫一扫