简单、高效且通用的 Web 表单验证

• 下载 Web_Validation - 2.76 KB

引言

在创建任何 Web 表单时，检查和验证用户输入的信息始终非常重要。这是 Web 表单开发的重要任务。 两种类型的验证用于检查信息，一种是服务器端验证，另一种是客户端验证。 这次我们将学习编写简单高效的客户端验证。 我创建了一个通用的 javascript 文件 (CommonValidations.js)，其中包含多个函数。 然后，我定义了一些属性，我们需要在创建任何基于需求的 Web 表单时设置这些属性。 之后，我们只需要在我们的 Web 表单中使用该 js 文件即可。

使用代码

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

HTML 文本框控件

序号	属性名称	属性值	描述
1.	强制性	是/否	它将决定是否是必需的
2.	cntTitle	该控件的标题	例如：txtAmount 应该有标题 Amount
3.	valRule	IsPositiveInteger, IsPositiveDecimal, IsPositiveNDecimal, IsSignedIntNDecimal, IsSignedFloatNDecimal, IsValidEmail, IsValidURL, IsValidDate	根据属性值，将应用规则
4.	minNumVal	任何数值	它不允许数字值小于此属性值，并且只有在我们应用了正确的 valRule 时才会起作用
5.	maxNumVal	任何数值	它不允许数字值大于此属性值，并且只有在我们应用了正确的 valRule 时才会起作用
6.	minDateVal	任何日期	它不允许日期值小于此属性值，并且只有在我们应用了正确的 valRule 时才会起作用
7.	maxDateVal	任何日期	它不允许日期值大于此属性值，并且只有在我们应用了正确的 valRule 时才会起作用

始终创建一个 id 为 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 应该有标题 Item

始终创建一个 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 应该有标题 Gender

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

<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 应该有标题 Terms & Conditions

始终创建一个 id 为 span_<复选框 id> 的 span 并将样式设置为如下

<input name="chkTerms" type="checkbox" id="chkTerms" cntTitle="Terms and Conditions" />
<span id="span_chkTerms" style="display:none;color:Red"></span>

我使用了几个正则表达式进行不同类型的验证。 请参阅下面来自 CommonValidation.js 文件的 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;
 }
		

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