如何在网页中添加文本框验证？

Question

您好，我有两个文本框。一个用于用户名，另一个用于密码。目前，如果任何字段留空，我有显示错误消息的代码“凭据无效”。这会将我带到显示错误消息的新页面，然后返回主页，我可以在其中再次输入我的用户名和密码。

我希望在文本框本身附近完成验证部分。例如，如果用户名文本框留空并单击提交按钮，它应该显示一条消息，例如请在文本框本身附近输入用户名。

HTML 代码：

<form method="post" action="login.php">
      <p class="user_text">USER LOGIN</p>
      <p class="user_name_text">username<span style="color:#f60219;"> *</span></p>
      <p style="padding:8px 0 0 5px;">

        <input type="text" name="username" minlength="2" maxlength="20" class="contact_filed" value="enter your name" onfocus="javascript:clearField(this,'enter your name')" onblur="javacript:fillField(this,'enter your name')" /></label>
     </p>
      <p class="user_name_text1">password<span style="color:#f60219;"> *</span></p>
      <p style="padding:8px 0 0 5px;">
        <input type="password" name="password" maxlength="20" class="contact_filed" value="password" onfocus="javascript:clearField(this,'password')" onblur="javacript:fillField(this,'password')" />
      </p>
      <p style="padding:16px 0 0 16px;"><input name="submit" type="submit" value="Submit" class="log" /></p>
      <p style="padding:12px 0 0 16px;"><a href="#" class="read_more1">Create new account</a><a href="#" class="read_more1">Request new password</a></p>
</form>

用于验证的 PHP 代码：

if ($_POST['submit']) { 
include('connect.php'); 
$u = mysql_real_escape_string($_POST['username']); 
$p = md5($_POST['password']); 
$q = mysql_query("SELECT id FROM $login_db_table WHERE username='$u' AND password='$p' LIMIT 1"); 

if (mysql_fetch_array($q, MYSQL_ASSOC)) { 
    if ($_POST['remember']) { 
        setcookie('username', $_POST['username'], time() + 5000000); 
        setcookie('password', md5($_POST['password']), time() + 5000000); 
    } else { 
        setcookie('username', $_POST['username']); 
        setcookie('password', md5($_POST['password'])); 
    } 


if($u != "" && $p !=""){
echo '<p>Login successful.</p>'; 
header("Location: main.php");
}

} 

else
echo "Login failed. Please enter valid credentials.";
echo "<script>setTimeout(\"location.href = 'http://localhost/CashTree/reg/Home/index.html';\",1500);</script>";
    //echo '<p>Login failed. Please enter your correct credentials</p>'; 

} 

Answer 1

你可以在元素say附近添加一个html元素

    <p style="padding:8px 0 0 5px;">

        <input id="uname" type="text" name="username" minlength="2" maxlength="20" class="contact_filed" value="enter your name" onfocus="javascript:clearField(this,'enter your name')" onblur="javacript:fillField(this,'enter your name')" />
<div id="user_name_invalid"></div>
     </p>

然后

使用 jQuery

<script type='text-javascript'>
 $("#form").submit(function(e){
   var uname = $("#username").val();
   if(uname == ""){
     $("#user_name_invalid").html("Username is invalid");
     return false;
   }
}
</script>

return false; 停止提交。

Answer 2

要检查用户名是否为空，只需这样做：

if($_POST['username']=''){
   echo 'Please enter the username';
}

如果您希望它靠近文本框，只需将其放置在文本将显示为靠近文本框的位置，即在提交按钮的开头。如果您希望在显示此错误时这样做，他实际上不应该登录。您可以像这样使用布尔值：

$check=true;
if ($_POST['submit']) { 
   if($_POST['username']=''){
   echo 'Please enter the username';
   $check=false;
   }
   if($check){
   //everything you want to do if it's succesfull
   }
}

这将确保当$check=false 不会转到下一页而是停留在当前页面上，并显示错误消息。

Answer 3

您可以为此使用 javascript 或 jquery。 为了便于理解，我将用javascript进行说明。

在您的表单上，将第一行更改为

<form method="post" action="login.php" onsubmit="return check_error();">

并添加一个 javascript 部分

<script>
function check_error(){
   if(document.getElementById('username_id').value == ""){
      alert("Enter The Username");
      return false;
   }
}
</script>

您需要为要验证的每个文本框添加“ID”。

试试这个---

<script language="javascript">
function check_error(){
    if(document.getElementById('username').value == ""){
        alert('Please Enter Username');
        return false;
    }
}
</script>
<form method="post" onSubmit="check_error();">
<input type="text" name="username" id="username" />
<input type="submit" value="Submit" />
</form>

这是一个非常简单的演示。但您当然可以在此基础上再接再厉。

Answer 4

您还可以在输入标签上使用 reququired 属性的 HTML 5 新功能。喜欢一个例子：

<input type='text' name='txt_username' required='true' />
<input type='password' name='txt_password' required='true'/>

要使用上述功能，您需要在元素之前声明 。

您还可以使用“oninvalid”事件和 setCustomValidity("") 函数设置自定义错误消息。一个例子：

<input type='text' name='txt_photo_title' value='' required='true' placeholder="photo name" oninvalid="setCustomValidity('Please Enter Photo Name !');" />

一些示例登录表单如下所示。由于 HTML 5 的新特性，sdata 实际上并没有到达服务器，它在用户的浏览器中执行，所以点击提交按钮后，它会立即显示错误消息。并且它的设计也可以由 CSS 和新的 CSS 选择器来维护。谢谢并尝试如下示例。

<!DOCTYPE HTMl>
<html>
<head>
    <title> Test Form</title>
</head>
<body>
    <h1> Test Validation Form</h1>
    <hr>

    <form name='frm_test' method='post' action='login.php' > 
        <label> Username :</label>
        <input type='text' name='txt_username' required='true' oninvalid="setCustomValidity('Please enter username !');"/>
        <br/>
        <label> Password :</label>
        <input type='password' name='' required='true' oninvalid="setCustomValidity('Please Enter passwords !');"/>

        <input type='submit' name='btn_submit' value='Login'>
    </form>
</body>
</html>