JSフォーム検証コード（よく使う）_javascriptスキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JSフォーム検証コード（よく使う）_javascriptスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:06 PM

最近没有项目做，有点空余时间，小编把日常比较常用的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 id="我的第一段-JavaScript">我的第一段 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表单验证，代码简单易懂，非常实用，希望对大家有所帮助，同时也非常感谢大家对脚本之家网站的支持！

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptの文字列文字を交換しますMar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

独自のAjax Webアプリケーションを構築しますMar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

jQueryマトリックス効果Mar 10, 2025 am 12:52 AM

マトリックスの映画効果をあなたのページにもたらしましょう！これは、有名な映画「The Matrix」に基づいたクールなJQueryプラグインです。プラグインは、映画の古典的な緑色のキャラクター効果をシミュレートし、画像を選択するだけで、プラグインはそれを数値文字で満たされたマトリックススタイルの画像に変換します。来て、それを試してみてください、それはとても面白いです！それがどのように機能するかプラグインは画像をキャンバスにロードし、ピクセルと色の値を読み取ります。 data = ctx.getimagedata（x、y、settings.greasize、settings.greasize）.data プラグインは、写真の長方形の領域を巧みに読み取り、jQueryを使用して各領域の平均色を計算します。次に、使用します

シンプルなjQueryスライダーを構築する方法Mar 11, 2025 am 12:19 AM

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています！画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます

Angularを使用してCSVファイルをアップロードおよびダウンロードする方法Mar 10, 2025 am 01:01 AM

データセットは、APIモデルとさまざまなビジネスプロセスの構築に非常に不可欠です。これが、CSVのインポートとエクスポートが頻繁に必要な機能である理由です。このチュートリアルでは、Angular内でCSVファイルをダウンロードおよびインポートする方法を学びます

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。