지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > JS 양식 유효성 검사 코드(일반적으로 사용됨)_javascript 기술

JS 양식 유효성 검사 코드(일반적으로 사용됨)_javascript 기술

WBOY
풀어 주다： 2016-05-16 15:06:07
원래의
2419명이 탐색했습니다.

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

注册验证：

<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&#63;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&#63;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&#63;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&#63;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(/<\/&#63;[^>]*>/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|[!#\$%&'\*\+\-\/=\&#63;\^_\`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\&#63;\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))&#63;(\x20|\x09)+)&#63;(([\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))&#63;(\x20|\x09)+)&#63;(\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])))\.&#63;$/.test(val);
}
///手机号码验证
function checktelephone(cellPhone) {
var RegCellPhone = /^([0-9]{11})&#63;$/;
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表单验证，代码简单易懂，非常实用，希望对大家有所帮助，同时也非常感谢大家对脚本之家网站的支持！

관련 라벨：
js表单验证 常用表单验证 表单验证代码
원천：php.cn
이전 기사：JavaScript 코드로 자동 흔들기, 왼쪽, 오른쪽, 위아래 및 자동 이동_javascript 기술을 구현합니다. 다음 기사：jQuery의 비우기, 제거 및 detach_jquery에 대한 자세한 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
수정된 제목: 체크박스 선택에 따라 합계 계산 저는 간단한 금융 추적 애플리케이션을 개발 중입니다. 애플리케이션에는 모든 비용 청구서가 포함된 테이블이 있고 테이블 외부에 총 금액이 표시됩니다. JS 또는 A...
에서 2024-04-04 13:45:50
0
1
3465
React JSX에서 양식 유효성 검사 문제에 대한 솔루션은 무엇입니까? React에서 유효성 검사 양식을 만들려고 하는데 사용자 등록 데이터 저장을 추가하니 문제가 많이 발생합니다. importReact,{useState}from&q...
에서 2024-04-03 11:53:49
0
1
315
ID 대신 관계형 테이블 데이터 이름을 얻는 방법 나는 두 개의 테이블 Hero ID name Universe_id12 tag 199 glume 1 Universe id name 1 andromeda 2 auro...
에서 2024-03-31 20:48:12
0
2
276
PayPal API - 승인 후 주문 금액을 늘립니다. 결제 과정이 가장 좋나요? PayPal/Braintree API를 사용하고 있습니다. 원래 주문 금액이 승인된 후 증가하는 주문 금액(예: 배송비)을 처리하는 올바른 방법은 무엇입니까? 이...
에서 2024-03-30 19:45:14
0
1
418
URL 쿼리 문자열을 사용하여 양식 필드에 텍스트를 미리 로드합니다. 쿼리 문자열을 사용하여 두 개의 CeDiplomaValidation 양식 요소를 미리 채우는 이 웹 페이지의 URL을 생성하고 싶습니다. 다음 URL을 사용하여 ...
에서 2024-03-30 19:21:10
0
1
271
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿