Home > Developer > Web Develop
This section of the code to give a simple form validation instance, is to determine whether the input box is empty, you can follow this principle, to join the regular expression judgment, to achieve a variety of powerful forms validation function
<title>validate Empty fields</title>
<style type= "Text/css" >
body{font-family: "Trebuchet MS", verdana;width:450px;}
. error{color:red;}
#info {color: #008000; font-weight:bold;}
</style>
<body>
<form>
<fieldset>
<legend><strong>ersonal</strong></legend>
<table>
<tbody>
<tr>
<td>name:* </td>
<td><input type= "text" class= "required"/></td>
</tr>
<tr>
<td>address:* </td>
<td><input type= "text" class= "required"/></td>
</tr>
<tr>
<td>city: </td>
<td><input type= "Text"/></td>
</tr>
<tr>
<td>country:* </td>
<td><input type= "text" class= "required"/></td>
</tr>
</tbody>
</table>
</fieldset>
<br/>
<span id= "Info" ></span>
<br/>
<input type= "button" value= "Check" id= "Check"/>
</form>
<script type= "Text/javascript" src= ". /jquery.js "></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
var Datavalid=false;
$ (' #info '). html (');//And the result prompt is also set to null;
$ ('. Required '). blur (function () {//For elements of the required class, if the focus is lost, then ....
var cur=$ (this);//Gets the current element
Cur.next (' span '). Remove ()//And then remove the <span> of the wrong tip, no matter what he was;
if ($.trim (Cur.val ()) = = ")
{//Judge if the input is empty;
Cur.after (' <span class= ' error ' >mandatory field!</span> ');//Then add the error message after the input box;
Datavalid=false;
}else{datavalid=true;}
});
$ (' #check '). Click (function () {///click on the Check button to execute ....
if (datavalid)
{
$ (' #info '). html (' Validation OK ');//Prompts pass validation
}});
});
</script>
</body>
Web portal Source Code
This fragment is from http://www.huiyi8.com/webyuanma/menhu/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
