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();

 

转载于:https://www.cnblogs.com/maxiaoxiao/p/4742751.html