js jQuery 动态校验表单输入框内容

1,需要完成的功能

(1)在输入框中输入重复的字段值时

(2)当光标跳出此输入框时

2,实现代码

(1)html

<td class="inputLabelTd">活动标识码:</td>
                    <td class="inputTd">
                        <input id="edit_activityCode" name="activityCode" type="text" class="text"/>
                        <span id="uniqueNote" style="color:red;display:none;">活动标识码不能重复</span>
                        <span id="NullNote" style="color:red;display:none;">活动标识码不能为空</span>
                    </td>

(2)js

/*添加标识码校验是否唯一*/
        $("#edit_activityCode").bind("blur",function(){
            var actCode=$(this).val();
            if(actCode !=""){
                 $("#uniqueNullNote").css("display","none");
                 /*异步请求活动标识码是否唯一*/
                $.ajax({
                    url : "jfOperationActivity/checkActivityCode/"+actCode,

                    dataType : "json",
                    success : function(data) {
                            if(data !=null){
                                $("#uniqueNote").css("display","inline-block");
                            }else{
                                $("#uniqueNote").css("display","none");
                            }
                    }
                });
                }else{
                  $("#uniqueNote").css("display","none");
                  $("#NullNote").css("display","inline-block");
                  return;
            }

        });

3,注:(1)success中的回调函数,由于我是根据输入框的值查询数据库中是否有数据,来做出提示。这里的后台逻辑可以自由实现

(2)//标识码不进行动态验证--取消绑定blur事件

                 $(‘#edit_activityCode‘).unbind();

时间: 2024-08-05 00:16:52

js jQuery 动态校验表单输入框内容的相关文章

js监听input等表单输入框的变化事件oninput

js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变化的,复制粘贴也不能监听到,于是就用到了oninput事件来监听文本框value值的改变.由于是手机端页面没有考虑IE 这货.过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现,但是这存在着一些不好的用户体验.比如onchange事件只在键盘或者鼠标操作改变

validate+jquery+ajax表单验证

①Html form表单内容 <form class="cForm" id="cForm" method="post" action=""> <p> <label for="user">用户名</label> <input id="user" name="user" required minlength="

jquery设置表单元素为不可用代码实例

jquery设置表单元素为不可用代码实例:本章节通过简单的实例代码介绍一下如何将表单元素设置为不可用状态.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</t

jQuery简单表单验证效果

jQuery简单表单验证效果:只要有表单的地方,基本都会有表单验证,下面就结合实例简单介绍一下最简单的表单验证,如何防止填写的表单内容为空.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <tit

(四)Jquery Mobile表单

Jquery Mobile表单与列表 一.JM表单      1.表单      普通html表单            效果:          2.只能输入数字的表单           效果:              说明:label中的for="number-pattern" 就是说,当我们点击label是就会获取到id="number-pattern"的焦点,也就是下面input框的焦点. 3.文件文本框            效果:       4.密

jQuery formValidator表单验证插件常见有关问题

jQuery formValidator表单验证插件常见问题 如何实现一个控件,根据不同的情况,实现不同的控制? 一个页面上我有几个tab页,如何实现每个Tab页上的控件单独校验? 我采用的页面上文字问题的方式,点提交的时候,有校验未通过的,除了文字提示外,还可以再弹出窗口提示吗? 所有校验通过后,我还要再做别的判断可以吗?我自己的判断没有通过可以中断提交吗? 我有一组的checkbox(radiobutton)如何设置校验? 我有2个表单元素,任意一个元素输入东西就算验证通过,如何写代码?比如

Jquery 将表单序列化为Json对象

使用下面代码时注意不要忘记引入jquery文件,以下代码可以复制到html文件中执行可看到效果,非常方便好用.附代码: <!DOCTYPE html> <html> <head> <title></title> <script src="jquery-2.0.3.min.js"> </script> </head> <body> <form id="myForm&

jquery验证表单 提交表单

问题: jquery中使用submit提交按钮时,当return false后,依然会提交表单. 解决: 使用button按钮,而不是submit按钮 <script type="text/javascript" src="scripts/jquery-2.0.2.js"></script> <script type="text/javascript"> function check(){ var npassw

jQuery序列化表单时将制定元素排除在外

jQuery序列化表单时将制定元素排除在外:大家知道使用serialize()函数可以序列化一个表单,但是可能在实际应用中,需要将制定的表单元素排除在外,下面就通过实例代码演示一下如何实现此效果,代码实例如下: $("form[name='theform']").not($("input[type='hidden']")).not($("input[class='txt']")).serialize(); 上面代码只是一个演示,实际应用中要根据自