JS表单验证的代码(常用)

前端技术 2023/09/04 JavaScript

最近没有项目做，有点空余时间，小编把日常比较常用的js表单验证代码整理分享到phpstudy平台，供大家学习，需要的朋友参考下吧！

注册验证：

<script language=\"JavaScript\" src=\"js/jquery-1.9.1.min.js\" type=\"text/javascript\"></script>
//验证表单
function vailForm(){
var form = jQuery(\"#editForm\");
if(!vailNickName())return;
if(!vailPhone())return;
if(!vailPwd())return;
if(!vailConfirmPwd())return;
if(!vailEmail())return;
if(!vailCode())return;
if(!vailAgree())return;
form.submit();
}
//验证昵称
function vailNickName(){
var nickName = jQuery(\"#nickName\").val();
var flag = false;
var message = \"\";
var patrn=/^\\d+$/;
var length = getNickNameLength();
if(nickName == \'\'){
message = \"昵称不能为空！\";
}else if(length<4||length>16){
message = \"昵称为4-16个字符！\";
} else if(checkNickNameIsExist()){
message = \"该昵称已经存在，请重新输入！\";
}else{
flag = true;
}
if(!flag){
jQuery(\"#nickNameDiv\").removeClass().addClass(\"ui-form-item has-error\");
jQuery(\"#nickNameP\").html(\"\");
jQuery(\"#nickNameP\").html(\"<i class=\\\"icon-error ui-margin-right10\\\"> <\\/i>\"+message);
//jQuery(\"#nickName\").focus();
}else{
jQuery(\"#nickNameDiv\").removeClass().addClass(\"ui-form-item has-success\");
jQuery(\"#nickNameP\").html(\"\");
jQuery(\"#nickNameP\").html(\"<i class=\\\"icon-success ui-margin-right10\\\"> <\\/i>该昵称可用\");
}
return flag;
}
//计算昵称长度
function getNickNameLength(){
var nickName = jQuery(\"#nickName\").val();
var len = 0;
for (var i = 0; i < nickName.length; i++) {
var a = nickName.charAt(i);
　　　　　　//函数格式：stringObj.match(rgExp) stringObj为字符串必选 rgExp为正则表达式必选项
　　　　　　//返回值：如果能匹配则返回结果数组，如果不能匹配返回null
if (a.match(/[^\\x00-\\xff]/ig) != null){
len += 2;
}else{
len += 1;
}
}
return len;
}
//验证昵称是否存在
function checkNickNameIsExist(){
var nickName = jQuery(\"#nickName\").val();
var flag = false;
jQuery.ajax(
{ url: \"checkNickName?t=\" + (new Date()).getTime(),
data:{nickName:nickName},
dataType:\"json\",
type:\"GET\",
async:false,
success:function(data) {
var status = data.status;
if(status == \"1\"){
flag = true;
}
}
});
return flag;
}
//验证手机号
function vailPhone(){
var phone = jQuery(\"#phone\").val();
var flag = false;
var message = \"\";
//var myreg = /^(((13[0-9]{1})|159|153)+\\d{8})$/;
var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-3]{1})|(18[5-9]{1}))+\\d{8})$/;
if(phone == \'\'){
message = \"手机号码不能为空！\";
}else if(phone.length !=11){
message = \"请输入有效的手机号码！\";
}else if(!myreg.test(phone)){
message = \"请输入有效的手机号码！\";
}else if(checkPhoneIsExist()){
message = \"该手机号码已经被绑定！\";
}else{
flag = true;
}
if(!flag){
jQuery(\"#phoneDiv\").removeClass().addClass(\"ui-form-item has-error\");
jQuery(\"#phoneP\").html(\"\");
jQuery(\"#phoneP\").html(\"<i class=\\\"icon-error ui-margin-right10\\\"> <\\/i>\"+message);
//jQuery(\"#phone\").focus();
}else{
jQuery(\"#phoneDiv\").removeClass().addClass(\"ui-form-item has-success\");
jQuery(\"#phoneP\").html(\"\");
jQuery(\"#phoneP\").html(\"<i class=\\\"icon-success ui-margin-right10\\\"> <\\/i>该手机号码可用\");
}
return flag;
}
//验证手机号是否存在
function checkPhoneIsExist(){
var phone = jQuery(\"#phone\").val();
var flag = true;
jQuery.ajax(
{ url: \"checkPhone?t=\" + (new Date()).getTime(),
data:{phone:phone},
dataType:\"json\",
type:\"GET\",
async:false,
success:function(data) {
var status = data.status;
if(status == \"0\"){
flag = false;
}
}
});
return flag;
}
//验证密码
function vailPwd(){
var password = jQuery(\"#password\").val();
var flag = false;
var message = \"\";
var patrn=/^\\d+$/;
if(password ==\'\'){
message = \"密码不能为空！\";
}else if(password.length<6 || password.length>16){
message = \"密码6-16位！\";
}else if(patrn.test(password)){
message = \"密码不能全是数字！\";
}else{
flag = true;
}
if(!flag){
jQuery(\"#passwordDiv\").removeClass().addClass(\"ui-form-item has-error\");
jQuery(\"#passwordP\").html(\"\");
jQuery(\"#passwordP\").html(\"<i class=\\\"icon-error ui-margin-right10\\\"> <\\/i>\"+message);
//jQuery(\"#password\").focus();
}else{
jQuery(\"#passwordDiv\").removeClass().addClass(\"ui-form-item has-success\");
jQuery(\"#passwordP\").html(\"\");
jQuery(\"#passwordP\").html(\"<i class=\\\"icon-success ui-margin-right10\\\"> <\\/i>该密码可用\");
}
return flag;
}
//验证确认密码
function vailConfirmPwd(){
var confirmPassword = jQuery(\"#confirm_password\").val();
var patrn=/^\\d+$/;
var password = jQuery(\"#password\").val();
var flag = false;
var message = \"\";
if(confirmPassword == \'\'){
message = \"请输入确认密码！\";
}else if(confirmPassword != password){
message = \"二次密码输入不一致，请重新输入！\";
}else if(patrn.test(password)){
message = \"密码不能全是数字！\";
}else {
flag = true;
}
if(!flag){
jQuery(\"#confirmPasswordDiv\").removeClass().addClass(\"ui-form-item has-error\");
jQuery(\"#confirmPasswordP\").html(\"\");
jQuery(\"#confirmPasswordP\").html(\"<i class=\\\"icon-error ui-margin-right10\\\"> <\\/i>\"+message);
//jQuery(\"#confirm_password\").focus();
}else{
jQuery(\"#confirmPasswordDiv\").removeClass().addClass(\"ui-form-item has-success\");
jQuery(\"#confirmPasswordP\").html(\"\");
jQuery(\"#confirmPasswordP\").html(\"<i class=\\\"icon-success ui-margin-right10\\\"> <\\/i>密码正确\");
}
return flag;
}
//验证邮箱
function vailEmail(){
var email = jQuery(\"#email\").val();
var flag = false;
var message = \"\";
var myreg = /^([\\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\\.[a-zA-Z0-9_-])+/; 
if(email ==\'\'){
message = \"邮箱不能为空！\";
}else if(!myreg.test(email)){
message = \"请输入有效的邮箱地址！\";
}else if(checkEmailIsExist()){
message = \"该邮箱地址已经被注册！\";
}else{
flag = true;
}
if(!flag){
jQuery(\"#emailDiv\").removeClass().addClass(\"ui-form-item has-error\");
jQuery(\"#emailP\").html(\"\");
jQuery(\"#emailP\").html(\"<i class=\\\"icon-error ui-margin-right10\\\"> <\\/i>\"+message);
//jQuery(\"#email\").focus();
}else{
jQuery(\"#emailDiv\").removeClass().addClass(\"ui-form-item has-success\");
jQuery(\"#emailP\").html(\"\");
jQuery(\"#emailP\").html(\"<i class=\\\"icon-success ui-margin-right10\\\"> <\\/i>该邮箱可用\");
}
return flag;
}
//验证邮箱是否存在
function checkEmailIsExist(){
var email = jQuery(\"#email\").val();
var flag = false;
jQuery.ajax(
{ url: \"checkEmail?t=\" + (new Date()).getTime(),
data:{email:email},
dataType:\"json\",
type:\"GET\",
async:false,
success:function(data) {
var status = data.status;
if(status == \"1\"){
flag = true;
}
}
});
return flag;
}
//验证验证码
function vailCode(){
var randCode = jQuery(\"#randCode\").val();
var flag = false;
var message = \"\";
if(randCode == \'\'){
message = \"请输入验证码！\";
}else if(!checkCode()){
message = \"验证码不正确！\";
}else{
flag = true;
}
if(!flag){
jQuery(\"#randCodeDiv\").removeClass().addClass(\"ui-form-item has-error\");
jQuery(\"#randCodeP\").html(\"\");
jQuery(\"#randCodeP\").html(\"<i class=\\\"icon-error ui-margin-right10\\\"> <\\/i>\"+message);
//jQuery(\"#randCode\").focus();
}else{
jQuery(\"#randCodeDiv\").removeClass().addClass(\"ui-form-item has-success\");
jQuery(\"#randCodeP\").html(\"\");
jQuery(\"#randCodeP\").html(\"<i class=\\\"icon-success ui-margin-right10\\\"> <\\/i>\");
}
return flag;
}
//检查随机验证码是否正确
function checkCode(){
var randCode = jQuery(\"#randCode\").val();
var flag = false;
jQuery.ajax(
{ url: \"checkRandCode?t=\" + (new Date()).getTime(),
data:{randCode:randCode},
dataType:\"json\",
type:\"GET\",
async:false,
success:function(data) {
var status = data.status;
if(status == \"1\"){
flag = true;
}
}
});
return flag;
}
//判断是否选中
function vailAgree(){
if(jQuery(\"#agree\").is(\":checked\")){
return true;
}else{
alert(\"请确认是否阅读并同意XX协议\");
}
return false;
}
function delHtmlTag(str){ var str=str.replace(/<\\/?[^>]*>/gim,\"\");//去掉所有的html标记 var result=str.replace(/(^\\s+)|(\\s+$)/g,\"\");//去掉前后空格 return result.replace(/\\s/g,\"\");//去除文章中间空格}<!DOCTYPE html><html><body><h1>我的第一段 JavaScript</h1><p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p><input id=\"demo\" type=\"text\"><script>function myFunction(){var x=document.getElementById(\"demo\").value;if(x==\"\"){ alert(\"输入不能为空\"); return;}if(isNaN(x)){ alert(\"请输入数字\"); return;}if(x.length!=6){ alert(\"请输入6位数字\"); return;}}</script><button type=\"button\" onclick=\"myFunction()\">点击这里</button></body></html> 
//验证密码为数字字母下划线
function CheckPwd(pwd) {
var validStr = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_~/!@#$%^&*();-+.=,\";
for (i = 0; i < pwd.length; i++) {
if (validStr.indexOf(pwd.charAt(i)) == -1) {
return false;
}
}
return true;
}
//验证邮箱格式
function checkemail(email) {
var filter = /^([a-zA-Z0-9_\\.\\-])+\\@(([a-zA-Z0-9\\-])+\\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email)) {
return false;
}
return true;
}
function isEmail(val) {
return /^((([a-z]|\\d|[!#\\$%&\'\\*\\+\\-\\/=\\?\\^_\\`{\\|}~]|[\\u00A0-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF])+(\\.([a-z]|\\d|[!#\\$%&\'\\*\\+\\-\\/=\\?\\^_`{\\|}~]|[\\u00A0-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF])+)*)|((\\x22)((((\\x20|\\x09)*(\\x0d\\x0a))?(\\x20|\\x09)+)?(([\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x7f]|\\x21|[\\x23-\\x5b]|[\\x5d-\\x7e]|[\\u00A0-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF])|(\\\\([\\x01-\\x09\\x0b\\x0c\\x0d-\\x7f]|[\\u00A0-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF]))))*(((\\x20|\\x09)*(\\x0d\\x0a))?(\\x20|\\x09)+)?(\\x22)))@((([a-z]|\\d|[\\u00A0-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF])|(([a-z]|\\d|[\\u00A0-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF])([a-z]|\\d|-|\\.|_|~|[\\u00A0-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF])*([a-z]|\\d|[\\u00A0-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF])))\\.)+(([a-z]|[\\u00A0-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF])|(([a-z]|[\\u00A0-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF])([a-z]|\\d|-|\\.|_|~|[\\u00A0-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF])*([a-z]|[\\u00A0-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF])))\\.?$/.test(val);
}
///手机号码验证
function checktelephone(cellPhone) {
var RegCellPhone = /^([0-9]{11})?$/;
falg = cellPhone.search(RegCellPhone);
if (falg == -1) {
return false;
} else {
return true;
}
}
//获取URL参数值
function getParameter(param) {
var query = window.location.search;
var iLen = param.length;
var iStart = query.indexOf(param);
if (iStart == -1)
return \"\";
iStart += iLen + 1;
var iEnd = query.indexOf(\"&\", iStart);
if (iEnd == -1)
return query.substring(iStart);
return query.substring(iStart, iEnd);
}

以上代码是小编给大家介绍的js表单验证，代码简单易懂，非常实用，希望对大家有所帮助，同时也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/11333

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案