SoFunction
Updated on 2025-02-28

Example of jQuery form validation function based on regular expressions

This article describes jQuery's form verification function based on regular expressions. Share it for your reference, as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" language="javascript" src="jquery-1.7."></script>
<script type="text/javascript" language="javascript" >
function validata(){
  if($("#username").val()==""){
  alert("Please enter a name");
  return false;
  }
  if($("#password").val()==""){
  alert("Please enter your password");
  return false;
  }
  if($("#telephone").val()==""){
  alert("Please enter your phone number");
  }
  if($("#email").val()==""){
  $("#email").val("shuangping@");
  }
}
function isInteger(obj){
  reg=/^[-+]?\d+$/;
  if(!(obj)){
  $("#test").html("<b>Please input correct figures</b>");
  }else{
  $("#test").html("");
  }
}
function isEmail(obj){
  reg=/^\w{3,}@\w+(\.\w+)+$/;
  if(!(obj)){
  $("#test").html("<b>Please enter the correct email address</b>");  }else{
  $("#test").html("");
  }
}
function isString(obj){
  reg=/^[a-z,A-Z]+$/;
  if(!(obj)){
  $("#test").html("<b>only enter characters</b>");  }else{
  $("#test").html("");
  }
}
function isTelephone(obj){
  reg=/^(\d{3,4}\-)?[1-9]\d{6,7}$/;
  if(!(obj)){
  $("#test").html("<b>Please enter the correct phone number!</b>");  }else{
  $("#test").html("");
  }
}
function isMobile(obj){
  reg=/^(\+\d{2,3}\-)?\d{11}$/;
  if(!(obj)){
  $("#test").html("Please enter the correct mobile phone");  }else{
  $("#test").html("");
  }
}
function isUri(obj){
  reg=/^http:\/\/[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&amp;_~`@[\]\':+!]*([^&lt;&gt;\"\"])*$/;
  if(!(obj)){
  $("#test").html($("#uri").val()+"Please enter the correct inernet address");  }else{
  $("#test").html("");
  }
}
//The document is loaded and executed$(document).ready(function() {
// do something here
//Interlaced color change function$("p").each(function(i){
  =['red','green','blue','black'][i%2]
  });
//eq(2) gets the third element of the $("p") collection$("p").eq(2).click(function(){$("#display").css("color","blue")});
//All p in tests have the style "over" attached.$("#test&gt;p").addClass("over");
//The last p in the test has the style "out" attached.$("#test p:last").addClass("out");
//I haven't understood the selection of the same level element yet//$('#faq').find('dd').hide().end().find('dt').click(function()
//Select parent element$("a").hover(
   function(){$(this).parents("p").addClass("out")},
   function(){$(this).parents("p").removeClass("out")})
//hover mouse hover effect, toggle switches the function to be called each time it clicks,//trigger(eventtype): Trigger a certain type of event on each matching element,//bind(eventtype,fn), unbind(eventtype): The binding and reverse binding of events remove bound events from each matching element.//Continuous writing of methods$("#display").hover(function(){
  $(this).addClass("over");
  },function(){
   $(this).removeClass("over");
  })
  .click(function(){alert($("#display").text())});
if($.){//Judge the browser, if it is ie, then execute the following functions  //Focus  $("input[@type=text],textarea,input[@type=password]")
  .focus(function(){$(this).css({background:"white",border:"1px solid blue"})})
  //You can also write in this way,  //.blur(function(){$(this).css({background:"white",border:"1px solid black"})})
  //Lost focus  //Css style can be added through addClass()  $("input[@type=text],textarea,input[@type=password]")
  .blur(function(){$(this).css({background:"white",border:"1px solid black"});});
}
});
&lt;/script&gt;
&lt;style type="text/css"&gt;
.over{
font-size:large;
font-style:italic;
}
.out{
font-size:small;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body &gt;
&lt;div &gt;demo&lt;/div&gt;
&lt;div &gt;
&lt;p&gt;adfa&lt;a&gt;dfasfa&lt;/a&gt;sdfasdf&lt;/p&gt;
&lt;p&gt;adfadfasfasdfasdf&lt;/p&gt;
&lt;p&gt;adfadfasfasdfasdf&lt;/p&gt;
&lt;p&gt;adfadfasfasdfasdf&lt;/p&gt;
&lt;/div&gt;
&lt;form &gt;
isString&lt;div&gt;&lt;input type="text"  onblur="isString()"/&gt;&lt;/div&gt;
isInteger&lt;div&gt;&lt;input type="text"  onblur="isInteger()"/&gt;&lt;/div&gt;
isTelephone&lt;div&gt;&lt;input type="text"  onblur="isTelephone()"/&gt;&lt;/div&gt;
isMobile&lt;div&gt;&lt;input type="text"  onblur="isMobile()"/&gt;&lt;/div&gt;
isEmail&lt;div&gt;&lt;input type="text"  onblur="isEmail()"/&gt;&lt;/div&gt;
isUri&lt;div&gt;&lt;input type="text"  onblur="isUri()"/&gt;&lt;/div&gt;
&lt;div&gt;&lt;input type="button" value="Validata" onclick="return validata();" /&gt;&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Attachment: Commonly used js verification functions:

Home page form js:

function checkVaild()
{
  var User=$("#Mobile").val();
  var reg=/^(\+\d{2,3}\-)?\d{11}$/;
  if (User=="")
  {
   alert("Mobile phone number cannot be empty") ;
   return false;
  }
  if(!(User)){
  alert("Incorrect mobile phone number") ;
  return false ;
  }
  return true ;
}

Filtering of special characters for regular expressions:

function doValidate(value)
{
  vkeyWords=/^[^`~!@#$%^&amp;*()+=|\\\][\]\{\}:;'\,.&lt;&gt;/?]{1}[^`~!@$%^&amp;()+=|\\\][\]\{\}:;'\,.&lt;&gt;?]{0,19}$/;
  if(value==null || value=="")
  {
  alert("Please enter the correct query parameters");
  return false;
  }
  if(!(value))
  {
  alert("The query parameters you entered are incorrect, please re-enter!");
  return false;
  }
  return true;
}

PS: Here are two very convenient regular expression tools for your reference:

JavaScript regular expression online testing tool:
http://tools./regex/javascript

Regular expression online generation tool:
http://tools./regex/create_reg

For more information about jQuery, please view the special topic of this site: "Summary of jQuery regular expression usage》、《Summary of jQuery string operation skills》、《Summary of jQuery operation xml skills》、《Summary of jQuery extension skills》、《Summary of jquery selector usage"and"Summary of commonly used plug-ins and usages of jQuery》

I hope this article will be helpful to everyone's jQuery programming.