HTML代码动态高亮显示实例页面

展示

密码前后比对

请输入您的密码： *

请再次输入密码： *

这里将动态显示HTML代码：

     <strong>密码前后比对</strong>
     <p>
      请输入您的密码：<input name="pwd" id="pwd" type="password">
      <!-- 密码输入验证 -->
      <span id="pwd_span" style="color: red;">*</span>
     </p>
     <p>
      请再次输入密码：<input name="pwd2" id="pwd2" type="password">
      <!-- 密码再次输入的验证 -->
      <span id="pwd2_span" style="color: red;">*</span>
     </p>
    
回到相关文章 >>

代码

JS代码：
$(function(){
    $("input[type='password']").blur(function(){
        var id = $(this).attr("id"), v = $(this).val();
        if(v === ""){
            $("#" + id + "_span").text("密码不能为空！");     
            $(this).css("background-color","#ffffe0");
        }else{
            if(id === "pwd2" && v!== $("#pwd").val()){
                $("#" + id + "_span").text("前后密码不一致！");
                $(this).css("background-color","#ffffe0");
            }else{
                $("#" + id + "_span").text("*");
            }
        }
        $("#box").htmlcode($("#show"));    
    });     
    $("input[type='password']").focus(function(){
        $(this).css("background","white");    
        $("#box").htmlcode($("#show"));    
    });
    $("#box").htmlcode($("#show"));	 
});