jquery implements simple mobile authentication forms
- 2020-10-07 18:31:14
- OfStack
Verify that the red submit button is displayed
bindBlur:function(){//jquery Multilevel validation form
var n = $('#item_name');
var p = $('#price');
var r = $('#reserve');
show(velidate());// Do this after the page loads 1 Time to verify
// Respectively for 3 Validation bindings for the fields to be validated, which can also be written here 1 Other code
//$('#item_name','#price',$('#reserve')).on({blur:function(){show(veridate())}});
n.on({blur:function(){show(velidate())}});
p.on({blur:function(){show(velidate())}});
r.on({blur:function(){show(velidate())}});
function velidate(){// Gets the result of the validation
var flag = true;
if(n.val()==""){flag= false;}
if(p.val()=="0" || p.val()==""){flag= false;}
if(r.val()=="0" || r.val()==""){flag= false;}
return flag;
}
function show(flag){// Reflect the validation results to the page
if(flag){$(".down-complete-btn").css("background-color","#b02125");}
else{$(".down-complete-btn").css("background-color","#8f8f8f");}
}
},
Validation, which is called when the user clicks on the submit button, locates areas that need to be improved
check:function(){
var n = $('#item_name');
var p = $('#price');
var r = $('#reserve');
if(n.val()==""){n.focus();return false;}
if(p.val()=="0" || p.val()==""){p.focus();return false;}
if(r.val()=="0" || r.val()==""){r.focus();return false;}
return true;
},
This 1 section is ajax commit and call validation before commit
postData:function(){
$(".down-complete-btn").click(function(){
if(Add.check()){
$.ajax({
type : 'post',
dataType : 'json',
data : {
id : $("#item_id").val(),
name : $("#item_name").val(),
price : $("#price").val(),
photos : $("#photos").val(),
},
cache : false,
url : '/main/goods/add',
success : function(data){
if(data.code==1){
alert(" Modify the success ");
}else{
console.log(data);
}
},
error : function(){
alert(' Network anomalies ');
}
});
}
});
}
easy_form_validate.js
require.config({
paths:{
"jquery":"./lib/jquery-1.11.1.min",
'icon_Upload':'./icon_Upload'
}
});
require(['jquery','icon_Upload'],function(){
Add.bindBlur();
Add.postData();
});
var Add = {
bindBlur:function(){//jquery Multilevel validation form
var n = $('#item_name');
var p = $('#price');
var r = $('#reserve');
show(velidate());// Do this after the page loads 1 Time to verify
// Respectively for 3 Validation bindings for the fields to be validated, which can also be written here 1 Other code
//$('#item_name','#price',$('#reserve')).on({blur:function(){show(velidate())}});
n.on({blur:function(){show(velidate())}});
p.on({blur:function(){show(velidate())}});
r.on({blur:function(){show(velidate())}});
function velidate(){// Gets the result of the validation
var flag = true;
if(n.val()==""){flag= false;}
if(p.val()=="0" || p.val()==""){flag= false;}
if(r.val()=="0" || r.val()==""){flag= false;}
return flag;
}
function show(flag){// Reflect the validation results to the page
if(flag){$(".down-complete-btn").css("background-color","#b02125");}else{$(".down-complete-btn").css("background-color","#8f8f8f");}
}
},
check:function(){
var n = $('#item_name');
var p = $('#price');
var r = $('#reserve');
if(n.val()==""){n.focus();return false;}
if(p.val()=="0" || p.val()==""){p.focus();return false;}
if(r.val()=="0" || r.val()==""){r.focus();return false;}
return true;
},
postData:function(){
$(".complete-btn").click(function(){
if(Add.check()){
$.ajax({
type : 'post',
dataType : 'json',
data : {
id : $("#item_id").val(),
name : $("#item_name").val(),
summary : $("#summary").text(),
price : $("#price").val(),
store : $("#store").val(),
mobileDetail : $("#detail").val(),
photos : $("#photos").val(),
brokerage : $("#brokerage").val(),
flag : $("#flag").val(),
},
cache : false,
url : '/main/goods/add',
success : function(data){
if(data.code==1){
alert(" Modify the success ");
}else{
console.log(data);
}
},
error : function(){
alert(' Network anomalies ');
}
});
}
});
}
};
Let's look at one more validation code
<script type="text/javascript">
//<![CDATA[
$(function(){
/*
* The idea is probably first for each 1 a required To add a required marker, use each() Method to implement.
* in each() Method is first created 1 An element. Then through append() Method adds the created element to the parent element.
* Here below this It's very quintessential, every 1 Time of this They all correspond to each other input Element, and then gets the corresponding parent element.
* And then to input Element adds a lost focus event. Then the user name, mail verification.
* Here in 1 A judge is() If it is a user name, do the corresponding processing; if it is an email, do the corresponding verification.
* in jQuery In the frame, also can appropriate intersperse 1 Write authentically javascript The code. Let's say you have it in your authentication username this.value , and this.value.length . Judge the content.
* Then there is the validation of the mail, which appears to be using regular expressions.
* And then to input Element to add keyup Events and focus Events. Is in the keyup Also want to do 1 Let's verify that. Call blur Events will do. with triggerHandler() Trigger, which triggers the corresponding event.
* Make the final submission when the form is submitted 1 validation
* Deal with the whole and details
*/
// If required, add red star .
$("form :input.required").each(function(){
var $required = $("<strong class='high'> *</strong>"); // Create the element
$(this).parent().append($required); // It is then appended to the document
});
// Text box loses focus
$('form :input').blur(function(){
var $parent = $(this).parent();
$parent.find(".formtips").remove();
// Verify user name
if( $(this).is('#username') ){
if( this.value=="" || this.value.length < 6 ){
var errorMsg = ' Please enter at least 6 The user name of the bit .';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = ' Input the correct .';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
// Validation email
if( $(this).is('#email') ){
if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
var errorMsg = ' Please enter the correct one E-Mail address .';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = ' Input the correct .';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});//end blur
// Submit for final validation.
$('#send').click(function(){
$("form :input.required").trigger('blur');
var numError = $('form .onError').length;
if(numError){
return false;
}
alert(" Registered successfully , The password has been sent to your email , Please find .");
});
// reset
$('#res').click(function(){
$(".formtips").remove();
});
})
//]]>
</script>