Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Ex No: 5 Form Validation Using Javascript DATE: .01.11

    Încărcat de

    aswinibala
    40 vizualizări18 pagini
    JavaScript is a scripting language designed to add interactivity to the html page. A variable declared within a function has a local scope. A variable declared without the var keyword ahs a global scope.

    Descriere originală:

    Titlu original

    Ex No 05

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOC, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    JavaScript is a scripting language designed to add interactivity to the html page. A variable declared within a function has a local scope. A variable declared without the var keyword ahs a global scope.

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    40 vizualizări18 pagini

    Ex No: 5 Form Validation Using Javascript DATE: .01.11

    Încărcat de

    aswinibala
    JavaScript is a scripting language designed to add interactivity to the html page. A variable declared within a function has a local scope. A variable declared without the var keyword ahs a global scope.

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 18

    EX NO : 5 DATE: .01.

    11

    FORM VALIDATION USING JAVASCRIPT

    AIM: To validate form and login page using JavaScript.

    ALGORITHM: 1. Design the login page. Username and Password are text fields, a CheckboxRemember me, Submit button, a link to the register page.

    2. Design the register page to contain the following. Username, password, date of birth, address, phone number, submit and reset buttons.

    3.

    Using JavaScript perform validations for username, password, dob, phone number in the register page.

    4. These entries are mandatory. Username must start with character, password and confirm password must match and must be of 4 characters only. Phone number should be 8 digit.

    5. An alert box specifies the correct format for each data appears if the user moves from one field to another.

    6. The login page checks for username match. If the remember me checkbox is selected, the password field appears.

    DEFINITION: JavaScript is a scripting language designed to add interactivity to the HTML page.It is usually embedded directly to the html pages. DESCRIPTION: Description JavaScript variables Definition Declared using the var keyword. A variable declared within a function has a local scope. Variable declared without the var keyword ahs a global scope. Assigning values to variables that have not yet been declared also are global. + addition -Sub * Multiplication /Division % Modulus ++ Increment --Decrement = += -= *= %= /= = is equal to == stricty equal to > Greater than < Lesser than <= Lesser than or equal Usage var x=5; var car; x=x+y; y=z-6;

    Arithmetic Operators:

    Assignment Operators

    x=y x+=y y-=z y*=z x%=z x/=z Given that x=5, x=8 is false x===5 is false x===5 is true

    Comparison Operators

    Logical Operators

    to >= Greater than or equal to != Not equal to To determine the logic between two variables && || !

    X=2 y=5 (X<4&&y>4 )is true

    Conditional Statements

    If..else if(condition) { Code } else { Code } Switch statements switch(v) {case 1: execute code break; case2: execute code break; default: } Alert Box: When an alert box comes, user will have to click OK to proceed. Confirm Box: When a confirm box pops up , the user has to click either OK or Cancel to proceed. Prompt box: Used when the user has to enter value before entering the page. A function contains code that will be executed by an event or call to the function.

    Popup Boxes

    alert(hello world); confirm(You agree??); prompt(pls enter your name);

    Functions

    Function xyz() { Code; return x;

    Loops

    Return statement specifies value to be returned by the function. for(;;) do while while for ..in

    Events

    Inserting Special Characters

    Objects

    Regular Expression

    onLoad and upLoad <form name="login_form" events are triggered onsubmit="login_check();"> when user enters or leaves the page.Often used to deal with cookies. onSubmit event triggers when submit button is clicked. onMouseOver when mouse is over an HTML element. onFocus,onBlur,onchange are used in combination mith validation of form fields. The backslash is used to Code Output insert \ single apostrophes,quotes, and quote other spl characters. \ double quote \\ backslash An object has method var text=hello world and properties. document.write(text.length); Properties are values op:11 associated with the document.write(toUpperCase(t object. ext)); Methods are actions that op:HELLO WORLD can be performed on objects. It is an object that var patt=/pattern/ describes a pattern of var patt=new RegExp(e); characters. document.write(pat.test(cse)

    test() is a function that searches a string for a specified value and returns true or false,depending on the result. exec() searches string for a particular value and returns the text of the found value.

    ); op: true document.write(pat.exec(cse )); op: e

    CODE: //page.html <frameset cols="50%,50%"> <frame src="main.html" name="1"> <frame src="new.html"name="2"> </frameset>

    //main.html <html> <head> <body> <h1><b> WELCOME TO STUDENT MAIL !! :)</b></H1> <h3> new user</h3><br> <a href="new.html" target="2"> create account</a><br> <h3> existing user</h3><br> <a href="exist.html" target="2"> sign in</a><br> </body> </head> </html>

    //new.html <html> <head> <script language="javascript" type="text/javascript"> function check() { var x=document.f1.t1.value; var x1=x.charAt(0); if(!isNaN(x1)) window.alert("enter alphabet");

    var y=document.f1.t2.value; var y1=y.length; if(y1!=4) window.alert("enter ony 4 characters");

    var z=document.f1.t3.value; if (z!==y) window.alert("enter correct password");

    var a = document.f1.t4.value; if(a.length<8) window.alert("phone no should be of 8 digits"); for(i=0;i<8;i++) { if(isNaN(a.charAt(i))) window.alert("phone no cannot contain characters"); }

    if((document.f1.t1.value==0)||(document.f1.t2.value==0)|| (document.f1.t4.value==0)||(document.f1.ta1.value==0)) window.alert("mandatory fields(*) need to be filled");

    var b=document.f1.t5.value; var b1=b.length; //var r=new RegExp("^\\d{2}[01-31]/\\d{2}[01-12]/\\d{4}[1970-2011]$")

    //var r=new RegExp(/^\[1-31]+\/+[1-12]+\/+[1990-2011]+$/) var r=/^\d{2}\/\d{2}\/\d{4}/; if(r.test(b)) window.alert("date correct"); else window.alert("entered date incorrect"); }

    </script> </head> <body> <form name="f1" method="get">

    <label>USER NAME * <input type="text" name="t1"><br></br> </label>

    <label>PASSWORD * <input type="text" name="t2"/><br></br> </label>

    <label>CONFIRM PASSWORD <input type="text" name="t3"/><br></br> </label>

    <label>PHONE NO * <input type="text" name="t4"/><br></br> </label>

    <label>D.O.B <input type="text" name="t5"/><br></br> </label>

    <label>ADDRESS *: <textarea name="ta1" rows="5",cols="5"> </textarea> </label><br>

    <label>COURSE : <textarea name="ta2" rows="5",cols="5"> </textarea> </label><br>

    <label> <input type="submit" onclick="check()"> </label>

    <label> <input type="button" value="clear"> </label>

    </form> </body> </html>

    //exist.html <html> <head> <script language="javascript" type="text/javascript"> var n=new Array("aaa","bbb","ccc","ddd"); var p=new Array("111","222","333","444"); function check1() { var x=document.f1.t1.value; var y=document.f1.t2.value; var f=0; for(var i=0;i< n.length;i++) { if(x==n[i]) { f=1;

    var k=i; break; } } if(f==1) { if(y==p[k]) window.alert("login successful"); else window.alert("invalid password"); } else window.alert("invalid user"); }

    function remember() { var a=document.f1.c1.value; document.f1.c1.value=false; var x=document.f1.t1.value; var y=document.f1.t2.value; var n = new Array("aaa", "bbb", "ccc", "ddd"); var p = new Array("111", "222", "333", "444"); if (document.f1.c1.value=true)

    { for (var i=0; i <n.length; i++) { if (x== n[i]) { document.f1.t2.value=p[i]; } } } } </script> </head> <body> <form name=f1>

    <label>USER NAME <input type="text" name="t1"><br></br> </label>

    <label>PASSWORD <input type="text" name="t2"/><br></br> </label>

    <label>

    <input type="submit" onclick="check1()"> </label>

    <label> <input type="checkbox" name="c1" onclick="remember()">remember password<br></br> </label>

    </form> </body> </html>

    OUTPUT:

    New user:

    Existing user:

    RESULT: Thus form validation is done using javascript.

    S-ar putea să vă placă și