ASP.NET Forms中NIC与姓氏文本框首字母校验两端失效如何解决？

问题原因梳理 #

1. 客户端校验失效原因 #

现有JS代码存在多处语法和逻辑错误，导致校验逻辑完全无法执行：

• document.getElementById是方法，需要用圆括号()传参，使用方括号[]属于语法错误，直接无法获取DOM元素
• ASP.NET Web Forms的服务器控件默认会自动生成客户端ID，和你写的服务端IDtxtLName/txtNIC不一致，除非显式设置ClientIDMode="Static"
• toLowerCase是字符串方法，调用时必须加圆括号()，未加括号相当于把函数本身赋值给变量，无法实现转小写逻辑
• substr(1,1)是取字符串的第二个字符（索引从0开始计数），取首字母应该用substr(0,1)或者直接取下标[0]
• 非空判断逻辑错误：LastName !== null || LastName !== '' 永远为真，应该用&&判断同时满足不为空和不为null
• 函数缺少闭合的右花括号}，属于语法错误

2. 服务端校验问题说明 #

服务端校验本身的运行机制就是页面回发（提交）后才会执行，如果你觉得校验没生效，大概率是提交逻辑中没有先判断Page.IsValid就执行了后续业务代码，另外现有服务端代码缺少对NIC文本框非空的判断，当NIC为空时取nic[0]会抛出索引越界异常。

修复步骤 #

步骤1：修改服务器控件配置 #

给两个文本框增加ClientIDMode="Static"配置，保证客户端ID和服务端ID一致，方便JS获取元素：

<!-- 姓氏文本框修改后 -->
<asp:TextBox ID="txtLName" CssClass="form-control" runat="server" ClientIDMode="Static"></asp:TextBox>

<!-- NIC文本框修改后 -->
<asp:TextBox ID="txtNIC" CssClass="form-control" runat="server" ClientIDMode="Static"></asp:TextBox>

同时确保你的提交按钮设置了CausesValidation="true"（默认值就是true，未手动修改可以不用加）。

步骤2：修复客户端校验代码 #

function validateLength(sender, args) {
    var LastName = document.getElementById('txtLName').value.trim();
    var Nic = document.getElementById('txtNIC').value.trim();
    // 只有两个输入框都非空才做校验
    if (LastName !== '' && Nic !== '') {
        var lFirstLetter = LastName.toLowerCase()[0];
        var nicFirstLetter = Nic.toLowerCase()[0];
        args.IsValid = (lFirstLetter === nicFirstLetter);
    } else {
        // 符合你设定的「姓氏为空则不校验」的逻辑
        args.IsValid = true;
    }
}

步骤3：修复服务端校验代码 #

protected void cvNic_ServerValidate(object source, ServerValidateEventArgs args)
{
    // 同时判断两个文本框都非空才做校验，避免索引越界
    if (!string.IsNullOrWhiteSpace(txtLName.Text) && !string.IsNullOrWhiteSpace(txtNIC.Text))
    {
        char lFirstLetter = txtLName.Text.Trim().ToLower()[0];
        char nicFirstLetter = txtNIC.Text.Trim().ToLower()[0];
        args.IsValid = (lFirstLetter == nicFirstLetter);
    }
    else
    {
        args.IsValid = true;
    }
}

步骤4：提交逻辑增加Page.IsValid判断 #

在你的提交按钮点击事件中，首先判断Page.IsValid再执行业务代码，确保校验不通过时不会走后续逻辑：

protected void btnSubmit_Click(object sender, EventArgs e)
{
    // 必须加这个判断，否则校验失败也会执行后续代码
    if (!Page.IsValid)
    {
        return;
    }
    // 这里写你的正常提交业务逻辑
}

如果需要输入时实时触发校验，可以给NIC和姓氏文本框增加onchange="Page_ClientValidate();"属性，输入失焦后就会自动触发客户端校验，不需要等点击提交按钮。

内容的提问来源于stack exchange，提问作者DeathStriker2