个人中心
gpt4 book ai didi

javascript - 我想在输入数据时显示一条错误消息(在 keyup 上)

转载 作者：行者123 更新时间：2023-11-29 03:01:09 26 4
gpt4 key购买 nike 

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ page session="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Employee Management System</title>
<link href="CSS/style.css" rel="stylesheet" type="text/css" /> 
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
 <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" />

<script language="javascript" type="text/javascript">


function checkform(pform1){
    var str=pform1.bloodGroup.value;
    var name = pform1.employeeName.value;
    var email = pform1.email.value;
    var phone = pform1.phoneNumber.value;
    var cleanstr = phone.replace(/[\(\)\.\-\ ]/g, '');
    var err={}; 
    var DOB = pform1.dateOfBirth.value;
    var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    var income = pform1.annualIncome.value;
    var Id = pform1.employeeId.value;
    var salary = income.replace(/[\(\)\.\-\ ]/g, '');
    var Eid = /^[a-zA-Z0-9]+$/;
    var validName = /^[a-zA-Z0-9]+$/;
    var validDOB = /^[0-9\/]+$/;

//check required fields
//password should be minimum 4 chars but not greater than 8
if (((str.length < 0) || (str.length > 3))){
err.message="Invalid blood group"; 
err.field=pform1.bloodGroup; 
}

//validate email
else if( (email != "") && !(validemail.test(email))){
err.message="Invalid email"; 
err.field=pform1.email; 

}

//check phone number
else if (isNaN((cleanstr))) { 
err.message="Invalid phone number"; 
err.field=pform1.phoneNumber; 
}

else if (isNaN((salary))) { 
    err.message="Invalid Annual Income"; 
    err.field=pform1.annualIncome; 
    }

else if((Eid == "") || !(Eid.test(Id))){
    err.message="Invalid Employee Id"; 
    err.field=pform1.employeeId;  
    }

else if((name == "") || !(validName.test(name))){

    err.message="Invalid Employee Name"; 
    err.field=pform1.employeeName; 

    }

else if( (DOB == "") || !(validDOB.test(DOB))){
    err.message="Invalid DOB"; 
    err.field=pform1.dateOfBirth; 
    }


if(err.message) 
        { 
                document.getElementById('divError').innerHTML = err.message;
                err.field.focus(); 
                return false;        

        } 
else
    {
    var permision = confirm("Are you sure to submit the details");
    if(permision)
        { 

            return true;
        }
    else{ 
        return false; }
    }
}
</script>

<script>
$(function() {
    $( "#dateOfBirth" ).datepicker({
          showOn: "button",
          buttonImage: "Pictures/calendicon.jpg" ,
          buttonImageOnly: true,
          buttonText: "Select date",
          changeMonth:true,
          changeYear:true,         
          yearRange: '1900:2100',
          numberOfMonths:[1,1],
          dateFormat: 'dd/mm/yy',
          maxDate: 0,
        });
  });


</script>
<script type="text/javascript">
    function crunchifyAjax() {
        var regnum ;
         var empID =$('#empId').val();
         if((typeof (empID)) != 'undefined' && (empID) != null && (empID.trim()!= ""))  
             { 
                regnum = $('#empId').val();  
               /*  alert(regnum); */
             } 
        else  
            {   $('#result').html('Employee Id invalid');
                 $('#result').css('color','red'); 
                $("#check").prop('disabled', true);
                return; 
            }




        var data = 'empId='
                + encodeURIComponent(regnum);

        $.ajax({
            url : 'entry.html',
            data : data,
            success : function(data) { 

                if(data == "true")
                    {
                        $('#result').html('Employee Id already exists');
                         $('#result').css('color','red'); 
                        $('#empId').val("");
                        $("#check").prop('disabled', true);
                    }               
                else
                    {           
                     $('#result').html('Valid EmployeeId ');
                     $('#result').css('color','green'); 
                        $("#check").prop('disabled', false);
                    }
            }
        });
    }
</script>

<style >
.colour{
background-color:#EBEBE4;border:1px solid #ABADB3;padding:2px 1px;


}
</style>
  <style>
img.ui-datepicker-trigger {
    width: 15px;
    height: 15px;
}

.msg{
font-family:FontAwesome;
    font-style:12px;
    background-color: #FEEFB3;
    content:'\f00c';

}
</style>


</head>
<body><center>  
<h2>Employee Management System</h2>
<form:form method="POST" action="./add.html" modelAttribute ="employee" onsubmit="return checkform(this);" >
<div id="errmsgbox">
<div id="divError"></div>
</div>
<table  border="0" cellpadding="0" cellspacing="0">
  <tr>
  <c:if test="${empty employee.employeeId}">
    <td width="14%">Employee ID<span class="mandatory" >*</span></td>
    <td width="35%"> <form:hidden path="ID" />
    <form:input path="employeeId"   onblur="crunchifyAjax();" id="empId" />  <div id="result" class = "msg"></div></td>
    </c:if>
     <c:if test="${!empty employee.employeeId}">
    <td width="14%">Employee ID</td>
    <td width="35%"> <form:hidden path="ID" />
    <form:input path="employeeId"  readonly = "true" class = "colour"/></td>
    </c:if>

    <td width="16%">Employee Name<span class="mandatory" >*</span></td>
    <td width="35%"><form:input path="employeeName"  /></td>
  </tr>
  <tr>
     <td>DOB<span class="mandatory" >*</span></td>
    <td><form:input path ="dateOfBirth"  id="dateOfBirth" readonly ="false"></form:input></td>  
    <td>Blood group </td>
    <td><form:input path="bloodGroup" /></td>
  </tr>
  <tr>
    <td>Annual Income </td>
    <td><form:input path ="annualIncome" /></td> 
    <td>Qualification</td>
    <td><form:input path ="qualification" /></td>
  </tr>

  <tr>
    <td>Pan No.</td>
    <td><form:input path="panNumber" /></td>

    <td>Phone No. </td>
    <td><form:input path="phoneNumber" maxlength="12" /></td>
  </tr>
  <tr>
    <td>Sex</td>
   <td><form:radiobutton path="sex"  value="m"/>Male 
   <form:radiobutton path="sex" value="f"/>Female</td>
    <td>Email</td>
    <td><form:input path="email" /></td>
  </tr>
<tr>
    <td>Address</td>

    <td colspan="3"><textarea name="" cols="" rows="2"></textarea></td>
  </tr>
</table>
<div>
     <input name="submit2" type="submit" title="Submit" value="Submit"  id = "check"  />
  <input type="button" name="reset_form" value="Reset" onclick="this.form.reset();"/>
     <a href="index.html"><input name="submit3" type="button" title="Reset" value="View All"/></a>
</div>
</form:form>
</center>
</body>
</html>

这是我的 JSP 页面。我已经完成了一次验证，它取决于提交按钮，即，如果有任何验证失败，它将检查并抛出错误消息，但我希望它在运行中，即，将进入自己。所以请帮助我!

最佳答案

为您的电子邮件文本字段提供 id 属性并使用我的代码:

$(document).ready(function(){
   $("#email").keyup(function(){
     var email = $(this).val();
    // here you can validate email and show alert or show message into your error box.
        var pattern=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if(pattern.test(email)){
            $("#errmsgbox").html("Valid email address");
        }else{
            $("#errmsgbox").html("Please enter valid email address");
        }
   });
});

关于javascript - 我想在输入数据时显示一条错误消息(在 keyup 上)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34850981/

26 4 0
文章推荐： ios - 使用 Calabash 测试应用程序关闭
文章推荐： java - 对数组进行排序并将更改链接到另一个相同大小的数组
文章推荐： java - 要找到给定数字的质因数，为什么要将 for 循环的第二条语句设置为 i * i <= userInput 而不是 i <= userInput？
文章推荐： mysql - Google Cloud SQL 查询速度慢使用文件排序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com