js函数实现输入格式的控制

    我们制作Web表单时,经常需要输入数字,比如:电话号码。我们可以通过验证用户的输入,如果不是数字的话,提示用户,如“您的输入无效,请重新输入!”或“您输入数字!”等。这种方式虽然可以解决问题,以确保用户输入有效的数字,但是用户体验效果非常差。那么有没有一种方式,即可以给用户完美的体验,用可以实现业务的需要呢!当然有,本文就讲述如何仅用一个JS函数来实现此功能(确保用户输入的为0-9这十个数字,而又不给出别扭的提示)。

    实际上,我们可以通过捕获键盘事件(js中的onkeyup()函数即可实现),然后对用户的输入进行检测。如果,满足条件就保留,反之,自动删除,从而保证用户的输入有效。

     原始的html表单元素如下:

<input type="text" id="phone" name="phone" />
添加onkeyup()函数之后的代码为:

<input type="text" id="phone" name="phone" οnkeyup="value=value.replace(/[^\d]/g," )"/>

是不是很简单呢,如果你要是.net的话,也可以使用另一种方式,如下所示:

原始的.net表单元素如下:

<asp:TextBox ID="phone" runat="server" Width="98%" MaxLength="20" ></asp:TextBox>

添加onkeyup()函数之后的代码如下:

<asp:TextBox ID="txtPhone" runat="server" Width="98%" MaxLength="20" οnkeyup="value=value.replace(/[^\d]/g,'')"></asp:TextBox>

上面用户只需要对数字进行验证,因此我们可以把函数内嵌在元素中,但是如果用户的表单中还有一个要求输入金额的字段,该怎么办呢?首先,我们分析一下,金额不仅可以是整数而且还可以是浮点数,这时我们可以通过调用一个js函数来实现,函数如下:

function CheckInputIntFloat(oInput)
{
    if('' != oInput.value.replace(/\d{1,}\.{0,1}\d{0,}/,''))
    {
        oInput.value = oInput.value.match(/\d{1,}\.{0,1}\d{0,}/) == null ? '' :oInput.value.match(/\d{1,}\.{0,1}\d{0,}/);
    }
}

    那么该函数如何调用呢,可以按下面的方式调用:

    html的情况:

<input type="text" id="money" name="money" οnkeyup="javascript:CheckInputIntFloat(this);" />
   .net的情况:
<asp:TextBox ID="money" runat="server" Width="98%" MaxLength="20" οnkeyup="javascript:CheckInputIntFloat(this);"></asp:TextBox>









评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值