Content manipulation functions, validation form validation in jquery

Source: Internet
Author: User
Tags tag name

Jquery:
Content Body stitching (you can directly splice element nodes and content nodes)
jquery implementation:
Programme 1:a.append (B); = = B.appendto (A); A behind the stitching B
Programme 2:a.prepend (B); = = B.prependto (A); The first insertion of a text is B
Text () compared to HTML ():
1. The same point:
can set or get content
2. Different points:
When fetched, the HTML () gets all the content body: Label + text
Text () gets just a literal
When set, if the content of the setting has an HTML () tag
HTML () settings can be parsed by the browser as a tag
All contents of text () are treated as normal text.
3. Both for the scene
JS generally uses the HTML () function
Implementations similar to text () are typically used for XML parsing
Val (): Manipulating value values in the form
Event Simplification: hover ()
D1.hover (
function () {T1.val ("First is a move-in event")},
function () {T1.val ("the second is a move Out event")}
);

Validation is a wrapper for form validation, a third-party jquery plugin that uses the jquery package first (jquery is a socket)
Two elements are involved in form validation: rules and hints
& (function () {
Locate the form, call method Validate () to verify
$ ("#id"). Validate ({
Rules, note the use of curly braces and semicolons
rules:{
Locating a label node with the Name property value
username:{
Attributes: Attribute values, note commas, separated by commas, not at the end
required:true,//must be filled
rangelength:[6,10]//character length
}
},
Prompt information
messages:{
username:{
Required: "This is a required item",
Rangelength: "Length must be between 6~10 characters"
}
}
});
});
Other validators:
email:{
email:true//must conform to the mailbox format
},
birthday:{
date:true,//must conform to date format
Number:true,//Must be a number
min:1000,//Minimum value
range:[6,16],//must be a number between this
},
pwd:{
Required:true
},
repwd:{
Required:true,
Equalto: "Input[name= ' pwd ']"//value must be equal to the value of the input tag named pwd
}

Custom Check Type:
1. Write a checksum type
$.validator.addmethod (parameter 1, parameter 2, parameter 3);
Parameter 1: The name of the check type
Parameter 2: Specific implementation of this check type
Parameter 3: Error message
2. Parameter 2 in detail, Parameter 2 returns a Boolean value that returns False to execute the error prompt (parameter 3)
function (parameter 1, parameter 2, parameter 3)
Parameter 1-----The value of customer input
Parameter 2-----The object that the entry corresponds to
Parameter 3-----The value of the checksum type when using a checksum type
$.validator.addmethod ("My", function (v,e,p) {
According to the data entered by the customer to verify, judge is not legal, if valid, return True, otherwise return false
Determine if there is a sensitive word in V (pujing)
if (V.indexof ("pujing")! =-1) {//have pujing
return false;
}
return true;
}, "Politically sensitive words cannot appear");
$ (function () {
$ ("#f1"). Validate ({
rules:{
username:{
My:true
}
}
});
});

Validation how the plugin sets the error message: (How to view elements: viewing in a Web page)
Built-in error prompt, format:
<label id= "" class= "error" for= "Name Value for entry" > Prompt information </lable>
When you see the built-in format, you change its properties by formatting the tag elements, modify the elements in the CSS code, and manipulate the elements dynamically in JS.
Get elements by Tag name: lable (label signature selector)
Get elements by class name:. Error (class selector)
Expand:
How to make the error message newline
The error prompt is generated by default, immediately following the corresponding input
In the appropriate location, add your own tag <label class= "error" for= "Name value" ></lable> add yourself after adding the system

Built-in error hints, when used, do not need to write the messages section to get the default
Internationalization:
The same software displays different languages, built-in Language pack implementations, dist files
<script type= "Text/javascript" src= ". /js/messages_es_pe.js "></script>

You can provide the checksum yourself in HTML:
1. In the script to get the form and provide a verification method, no specific implementation, in the HTML itself through the class to provide a specific validator, to change the message also through the selector to locate the lable label
<input type= "text" name= "pwd" class= "required number"/>
2. Built-in validation property and property values directly in the criteria to be verified:
<input type= "text" name= "username" required= "true" minlength= "2" maxlength= "8"/>
3. Provide custom tag tags because built-in properties are not HTML-own properties
<input type= "text" name= "username" data-rule-required= "true" data-rule-minlength= "2" data-rule-maxlength= "8"/ >

Content manipulation functions, validation form validation in jquery

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.