تحديد ما إذا كانت القيمة التي أدخلها المستخدم فارغة في JS هو أمر يستخدمه الجميع كثيرًا، لكنني فعلت ذلك، والسبب هو أنني أعتقد أن الكود الخاص بي مكتوب جيدًا، كمرجع لك وقت.
هذا مأخوذ من صفحة تسجيل المستخدم لأحد مشاريعي، بالنسبة لمعظم الأشخاص، هذا ما يقرب من 100٪ من ذوي الخبرة.
انشر الكود، كل هذه الرموز مكتوبة بلغة js، ليس من الصعب فهمها، عند القراءة، ما عليك سوى التمييز بين فئتي js.
رمز الصفحة الأولى: reguser.aspx
انسخ رمز الكود كما يلي:
<%@ لغة الصفحة = "c#" Codebehind = "RegUser.aspx.cs" AutoEventWireup = "false" Inherits = "Enterprise.Web.RegUser" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<أتش تي أم أل>
<الرأس>
<title>تسجيل المستخدم</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<LINK rel="stylesheet" type="text/css" href="/CSS/EnterpriseWebSite.css">
<script src="/js/CommonFunction.js" </script>
<النص البرمجي>
فار ريج = {};
reg.userName = '';
reg.password = '';
reg.confirmPassword = '';
reg.question = '';
reg.answer = '';
reg.url = '';
reg.sex = 1;
reg.email = '';
reg.tel = '';
reg.mobile = '';
reg.qq = '';
reg.address = '';
reg.postalcode = '';
reg.form = null;
الدالة btnSubmit_onclick()
{
reg.form = document.forms[0];
var comFun = new commonFunction();
إذا (!comFun.checkIsEmpty(reg.form))
{
عودة كاذبة.
}
إذا(comFun.$getElementById('txtPassword').value!=comFun.$getElementById('txtConfirmPassword').value)
{
تنبيه ("مدخلات كلمة المرور غير متناسقة")؛
comFun.$getElementById('txtConfirmPassword').select();
عودة كاذبة.
}
reg.userName = comFun.$getElementById('txtUserName');
reg.password = comFun.$getElementById('txtPassword');
reg.question = comFun.$getElementById('txtQuestion');
reg.answer = comFun.$getElementById('txtAnswer');
reg.url = comFun.$getElementById('txtUrl');
reg.email = comFun.$getElementById('txtEmail');
reg.tel = comFun.$getElementById('txtTel');
reg.mobile = comFun.$getElementById('txtMobile');
reg.qq = comFun.$getElementById('txtQQ');
reg.address = comFun.$getElementById('txtAddress');
reg.postalcode = comFun.$getElementById('txtPostalcode');
var es = comFun.$getElementsByName('sex');
var eL = es. length;
ل(فار ط = 0؛ أنا<eL؛ i++)
{
var e = es[i];
إذا (تم التحقق منه)
{
reg.sex = e.value;
استراحة؛
}
}
RegUser.Reg(reg.userName.value, reg.password.value, reg.question.value, reg.answer.value, reg.url.value, reg.sex.value, reg.email.value, reg.tel. value، reg.mobile.value، reg.qq.value، reg.address.value، reg.postalcode.value، callback_Reg)؛
}
وظيفة رد الاتصال_Reg (الدقة)
{
var rv = res.value;
إذا (رف)
{
تنبيه ("تم التسجيل بنجاح!")؛
window.location.href='/Default.aspx';
}
آخر
{
تنبيه ("حدث خطأ وفشل التسجيل! من الممكن أن يكون اسم المستخدم أو اسم المجال قد تم تسجيله بواسطة شخص آخر!")؛
}
}
// تحقق مما إذا كان اسم المجال لاسم المستخدم قد تم تسجيله من قبل مستخدمين آخرين
وظيفة checkIsRegistered (obj، errorS، t)
{
فار v = obj.value;
var rv = RegUser.CheckIsRegistered(v, t).value;
إذا (رف)
{
تنبيه (خطأ)؛
obj.select();
عودة كاذبة.
}
}
</script>
</الرأس>
<body MS_POSITIONING="GridLayout">
<form id="Form1"method="post" runat="server">
<جدول محاذاة = "مركز" خلية الحشو = "3" تباعد الخلايا = "0">
<تر>
<td><div align="right">اسم المستخدم:</div>
</TD>
<td><input type = "text" id = "txtUserName" onblur = "checkIsRegistered (هذا، 'تم تسجيل اسم المستخدم هذا بالفعل، يرجى استخدام اسم آخر!'، 1)" maxlength = "15" isRequired = "true" isValidate="true" errorSForEmpty="لا يمكن أن يكون اسم المستخدم فارغًا!" errorSForValidate="خطأ في المطابقة! يبدأ بحرف، ويسمح بـ 3-16 بايت، وشرطات أبجدية رقمية ورموز أمان مسموحة!" validatePattern="/^[a-zA-Z][a-zA-Z0-9_$% ]{2" ,15}$/"><font color="#ff0000">*</font></td>
</tr>
<تر>
<td><div align="right">كلمة المرور:</div>
</TD>
<td><input type="password" id="txtPassword" maxlength="15" isRequired="true" isValidate="true" errorSForEmpty="لا يمكن أن تكون كلمة المرور فارغة!" errorSForValidate="خطأ في المطابقة! يتطلب 3-16 حرفًا قسم يسمح بالشرطات السفلية الأبجدية الرقمية ورموز الأمان المسموح بها!!" validatePattern="/^[a-zA-Z0-9_$%]{2,15}$/"><font color="#ff0000">*</font></td>
</tr>
<تر>
<td><div align="right">تأكيد كلمة المرور:</div>
</TD>
<td><input type="password" id="txtConfirmPassword" isRequired="true" errorSForEmpty="تأكيد كلمة المرور لا يمكن أن تكون فارغة!"><font color="#ff0000">*</font></td>
</tr>
<تر>
<td><div align="right">سؤال كلمة المرور:</div>
</TD>
<td><input type = "text" id = "txtQuestion" max length = "50" isRequired = "true" isValidate = "true" errorSForEmpty = "لم يتم ملء سؤال المطالبة بكلمة المرور!" ErrorSForValidate = "يجب أن يكون الطول بين 8-50 حرفًا يجب ألا تكون هناك مسافات بين الكلمات!" validatePattern="//S{8,50}/"><font color="#ff0000">*</font></td>
</tr>
<تر>
<td><div align="right">إجابة سؤال كلمة المرور:</div>
</TD>
<td><input type = "text" id = "txtAnswer" max length = "50" isRequired = "true" isValidate = "true" errorSForEmpty = "لم يتم ملء إجابة سؤال كلمة المرور!" errorSForValidate = "الطول يجب أن يكون بين 8-50 حرفًا ويجب ألا تكون هناك مسافات بين الكلمات!" validatePattern="//S{8,50}/"><font color="#ff0000">*</font></td>
</tr>
<تر>
<td><div align="right">عنوان URL للموقع:</div>
</TD>
<td><input type = "text" id = "txtUrl" onblur = "checkIsRegistered (هذا، 'تم تسجيل عنوان URL هذا، يرجى استخدام عنوان آخر!'، 2)" maxlength = "20" isRequired = "true" isValidate ="true" errorSForEmpty="لا يمكن أن يكون عنوان URL للموقع فارغًا!" validatePattern="/^[a-zA-Z0-9]{1,20}$/"><font color="#ff0000">*</font></td>
</tr>
<تر>
<td><div align="right">الجنس:</div>
</TD>
<td><input type = "radio" id = "boy" name = "sex" value = "1" محدد> ذكر <input type = "radio" id = "girl" name = "sex" value = "0" >أنثى</td>
</tr>
<تر>
<td><div align="right">البريد الإلكتروني:</div>
</TD>
<td><input type="text" id="txtEmail" isValidate="true" errorSForValidate="تنسيق البريد الإلكتروني غير صحيح!" validatePattern="/^.+/@(/[?)[a-zA-Z0-!" 9/-/.]+/.([a-zA-Z]{2,3}|[0-9]{1,3})(/]?)$/"></td>
</tr>
<تر>
<td><div align="right">الهاتف الثابت:</div>
</TD>
<td><input type="text" id="txtTel" isRequired="true" isValidate="true" errorSForEmpty="لا يمكن أن يكون الخط الأرضي فارغًا!" errorSForValidate="تنسيق الخط الأرضي خاطئ! يرجى استخدام تنسيق 0592 -5555555 !" validatePattern="/^(/d{3}-|/d{4}-)?(/d{8}|/d{7})$/"><font color="#ff0000">*</font></td>
</tr>
<تر>
<td><div align="right">الهاتف المحمول:</div>
</TD>
<td><input type="text" id="txtMobile" isValidate="true" errorSForValidate="تنسيق الهاتف المحمول غير صحيح!" validatePattern="/^1/d{10}$/"></td>
</tr>
<تر>
<td><div align="right">سؤال وجواب:</div>
</TD>
<td><input type = "text" id = "txtQQ" isValidate = "true" errorSForValidate = "تنسيق QQ غير صحيح!" validatePattern = "/ ^ [1-9] * [1-9] [0-9] *$/"></td>
</tr>
<تر>
<td><div align="right">العنوان:</div>
</TD>
<td><input type="text" id="txtAddress"></td>
</tr>
<تر>
<td><div align="right">الرمز البريدي:</div>
</TD>
<td><input type="text" id="txtPostalcode" maxlength="6" isValidate="true" errorSForValidate="الرمز البريدي غير صحيح!" validatePattern="/^/d{6}/"></ تد>
</tr>
<تر>
<td><div align="right">العملية:</div>
</TD>
<td><input type = "button" value = "تسجيل" id = "btnSubmit" onclick = "btnSubmit_onclick ()"> <input type = "reset" value = "إعادة تعيين"></td>
</tr>
</الجدول>
</النموذج>
</الجسم>
</html>
في الكود أعلاه، تم تضمين ملف CommonFunction.js، وإليك محتواه:
انسخ رمز الكود كما يلي:
/*************************************************** * *********
*
* وظيفة شبيبة العامة
*
********************************************************************************************************************************************************************************* * *********/
الدالة المشتركة()
{
// قيمة التحقق فارغة أو فارغة
this.checkIsEmpty = الوظيفة(obj)
{
علامة فار = صحيح؛
for(var i=0; i<obj.length; i++)
{
var e = obj.item(i);
إذا (ه. مطلوب)
{
إذا (e.value=='')
{
تنبيه (e.errorSForEmpty)؛
e.focus();
العلم = خطأ؛
استراحة؛
}
}
إذا (e.isValidate)
{
إذا (this.checkValidate(e)==خطأ)
{
تنبيه (e.errorSForValidate)؛
e.select();
e.focus();
العلم = خطأ؛
استراحة؛
}
}
}
علم العودة؛
}
// تم التحقق من صحة قيمة التحقق
this.checkValidate = الوظيفة (هـ)
{
فار v = e.value;
إذا (الخامس!='')
{
return this.checkReg(e.validatePattern, v);
}
}
// التحقق من صحة التعبير العادي
this.checkReg = الوظيفة (النمط، القيمة)
{
Pattern = Pattern.substring(1, Pattern.length-1);
var reg = new RegExp(pattern);
إذا (! reg.test (القيمة))
{
عودة كاذبة.
}
}
// قم بإرجاع كائن العنصر حسب المعرف لأي معرف.
this.$getElementById = الوظيفة(المعرف)
{
var e = document.getElementById(id);
إذا (ه!='غير محدد')
{
العودة ه.
}
يعود؛
}
// قم بإرجاع كائن العنصر حسب الاسم لأي معرف.
this.$getElementsByName = الوظيفة(المعرف)
{
var e = document.getElementsByName(id);
إذا (ه!='غير محدد')
{
العودة ه.
}
يعود؛
}
}
نشر صورة للتأثير: