简单熟练和通用的Web表单验证

分享于 

6分钟阅读

Web开发

  繁體 雙語

介绍

在创建任何web窗体时,检查和验证用户输入的信息总是很重要的。 这是web表单开发的一项重要。 通过两种验证方式来检查信息,一个是服务器端,另一个是客户端。 这一次我们将学习编写简单和熟练的客户端验证。 我创建了一个包含几个函数的通用javascript文件( commonvalidations.js )。 然后,我定义了一些属性,我们需要在创建任何 web 基于表单的需求时设置这些属性。 之后,只需要在我们的web表单中使用这个js文件。

使用代码

让我们了解创建HTML控件时需要设置的属性。

HTML文本框控件

没有。属性名属性值描述
1.强制是/否它决定了它是否需要
2.cntTitle控件的标题例如:txtAmount应该有标题金额
3.valRuleIsPositiveInteger
IsPositiveDecimal
IsPositiveNDecimal
IsSignedIntNDecimal
IsSignedFloatNDecimal
IsValidEmail
IsValidURL
IsValidDate
根据属性值,将应用规则
4.minNumVal任意数值它不允许数字值小于这个属性值,并且只有当我们应用正确的valRule时它才会工作
5.maxNumVal任意数值它不允许数值大于这个属性值,并且只有当我们应用了正确的valRule时它才会工作
6.minDateVal任何日期它不允许日期值小于这个属性值,并且只有当我们应用了正确的valRule时它才会工作
7.maxDateVal任何日期它不允许日期值大于这个属性值,并且只有当我们应用正确的valRule时它才会工作

始终创建一个具有标识为 span_ <文本框 id> 和设置样式的span:


<input name="txtAmt" type="text" id="txtAmt" Mandatory="Yes" minNumVal="5" valRule="IsPositiveDecimal" cntTitle="Amount" >


<span id="span_txtAmt" style="display:none;color:Red"> </span>



HTML列表控件:

没有。属性名属性值描述
1.cntTitle控件的标题例如:lstItem应该有标题项

始终创建一个具有id作为 span_ <列表控件 id> 和设置样式的span:


<select name="lstItem" id="lstItem" cntTitle="Item">


 <option value="Please Select1">Select List1</option%gt;



     <option value="Item 1">Item 1</option>


</select>



HTML单选按钮控件

没有。属性名属性值描述
1.cntTitle控件标题,对同一组单选按钮使用相同的标题例如:rtGender应该具有标题性

始终创建一个 span,它的id为 span_ <单选按钮名称>,并将样式设置为 below:

<input value="Male" name="rdGndr" type="radio" id="rdMale" cntTitle="Gender" />


<input value="Female" name="rdGndr" type="radio" id="rdFemale" cntTitle="Select radio" />


<span id="span_rdGndr" style="display:none;color:Red"></span>



HTML复选框控件

没有。属性名属性值描述
1.cntTitle控件的标题例如:chkTerms应该有标题术语&条件

始终创建一个具有 id span_ <复选框> 和设置样式的span,如下所示:


<input name="chkTerms" type="checkbox" id="chkTerms" cntTitle="Terms and Conditions" />


<span id="span_chkTerms" style="display:none;color:Red"></span>



我为不同的验证使用了几个 正规表达式。 请参见 CommonValidation.js 文件中的below IsValid函数。





//Apply Rule and Validate


 function IsValid(valRule,valCnt)


 {


 var nPattern;


 var matchVal;


 switch(valRule)


 {


 case "IsPositiveInteger":


 nPattern =/^(0|[1-9][0-9]*)$/;


 spanText = "Only positive integer value allowed";


 break;


 case "IsPositiveDecimal":


 nPattern =/^([-+]?[0-9]*.?[0-9]+)$/;


 spanText = "Only positive decimal value allowed";


 break;


 case "IsPositiveNDecimal":


 nPattern =/(^(0|[1-9][0-9]*)$)|((^(0?|[1-9][0-9]*).(0*[1-9][0-9]*)$)|(^[1-9]+[0-9]*.0+$)|(^0.0+$))/;


 spanText = "Only positive and decimal value allowed";


 break;


 case "IsSignedFloatNDecimal":


 nPattern =/^([-+]?[0-9]*.?[0-9]+)$/;


 spanText = "Only signed float and decimal value allowed";


 break;


 case "IsValidEmail":


 nPattern =/^(".*"|[A-Za-z]w*)@([d{1,3}(.d{1,3}){3}]|[A-Za-z]w*(.[A-Za-z]w*)+)$/;


 spanText ="Please enter valid email id";


 break;


 case"IsValidURL":


 nPattern ="^[A-Za-z]+://[A-Za-z0-9-_]+.[A-Za-z0-9-_%&?/.=]+$";


 spanText = "Please enter valid URL";


 break;


 }


 matchVal = valCnt.match(nPattern);


 if (matchVal == null)


 {


 return false;


 }


 return true;


 }



根据你的要求,你可以添加更多 正规表达式 和自由修改现有的。 我从不同的来源收集了这些 正规表达式 并感谢他们。 我试图使用我在项目开发过程中发现的最常见的。


相关文章