Kiểm tra tính chính xác của việc điền vào biểu mẫu js. Xác thực biểu mẫu Ajax trước khi gửi lượt thích
Tất cả chúng ta đều đã điền vào các biểu mẫu vào một thời điểm nào đó. Một số thậm chí còn xử lý kết quả mà họ thu thập được, có thể là đơn đặt hàng trong cửa hàng trực tuyến hoặc dịch vụ trả lại. Khi yêu cầu người dùng điền một số thông tin, chúng tôi muốn thông tin đó tuân theo một định dạng nhất định, đặc biệt nếu thông tin đó sau đó được xử lý bởi CMS như 1C bitrix, WorldPress, v.v. Rốt cuộc, nếu trong cột điện thoại, người dùng vì lý do nào đó viết ra Đăng nhập Skype, có thể xảy ra lỗi xử lý dữ liệu: dữ liệu sẽ không được ghi lại và người dùng sẽ bị đưa trở lại trang điền biểu mẫu. Do đó, câu hỏi đặt ra là làm thế nào để kiểm tra dữ liệu đã nhập trực tuyến và ngăn chặn việc gửi dữ liệu không chính xác.
Công việc của giải pháp được mô tả do chúng tôi phát triển có thể được đánh giá ngay lập tức bằng cách sử dụng ví dụ về quy trình đặt hàng trên trang web Newcom. Dưới đây chúng tôi sẽ bắt đầu một câu chuyện về quá trình phát triển của nó, cũng như đưa ra một vài ví dụ nữa.
Xây dựng vấn đềViệc thực hiện kiểm tra javascript đơn giản đối với các trường biểu mẫu trước khi gửi nó đến máy chủ sẽ mất vài phút. Chỉ khi bạn viết điều đơn giản này lần thứ mười cho chỉ một trang web, bạn mới vô tình nghĩ đến việc tự động hóa quy trình này. Có lúc, những suy nghĩ về điều này trở nên ám ảnh đến mức tôi phải ngồi xuống và tạo ra một thư viện thu nhỏ xử lý các cánh đồng.
Nếu bạn chia vấn đề thành các khối, bạn sẽ nhận được một cái gì đó giống như sơ đồ sau: 
Chà, nếu có kế hoạch thì hãy thực hiện nó.
Những trường nào phổ biến nhất trên biểu mẫu?
- Đầu vào văn bản, theo quy tắc, được kiểm tra đơn giản về tính đầy đủ hoặc đơn giản biểu thức chính quy như email hoặc điện thoại.
- Các hộp kiểm đã kiểm tra sự hiện diện của nhãn hiệu (chẳng hạn như thỏa thuận xử lý dữ liệu cá nhân).
- Chúng tôi cũng có thể đề cập đến danh sách thả xuống được kiểm tra một số giá trị không trống.
- Đừng quên các nút radio quỷ quyệt. Tại sao lại quỷ quyệt? Có những cạm bẫy trong việc kiểm tra điểm.
Vì chúng ta đã bắt đầu viết một kịch bản ít nhiều phổ quát, nên chúng ta cần nghĩ đến những cấu trúc bất thường bị biến dạng, những cấu trúc này sẽ được gọi là “nhóm” trong tương lai. Bằng từ này, chúng tôi muốn nói đến các trường được kết nối với nhau. Ví dụ: nếu người dùng đã chọn hộp kiểm “Gửi tin qua email”, mục “e-mail” trở thành bắt buộc phải điền hoặc họ thường thích chia số điện thoại thành mã và chính số đó - thì tính chính xác phải được kiểm tra trong tất cả các trường và nếu sai một trường sẽ dẫn đến lỗi ở cả hai trường. Và thông báo lỗi không được hiển thị cho tất cả các trường của nhóm mà chỉ hiển thị cho một trường, nếu không số lượng của chúng sẽ bắt đầu làm bạn lóa mắt.
Có thể rút ra kết luận gì?
Cần tổ chức kiểm tra thường xuyên trường văn bản, kiểm tra email và các trường “kỹ thuật số” như số điện thoại, tuổi, v.v. Các hộp kiểm và nút radio được kiểm tra theo thuộc tính đã chọn, danh sách thả xuống được kiểm tra theo giá trị. Để thỏa mãn những nhóm xảo quyệt, hãy viết một trình xử lý cho chúng. Ngoài ra, cung cấp khả năng kiểm tra một số trường thuộc loại nào đó chức năng tùy chỉnhđối với những trường hợp đặc biệt khó khăn.
Theo tôi, chỉ có hai lựa chọn lưu trữ ở đây:
Đối tượng JS sẽ hoạt động nhanh hơn và trông chính xác hơn nhiều so với một số thuộc tính không chuẩn trong thẻ. Giả sử nó sẽ trông như thế này:
Var checkThis=(handle: "$("")",//con trỏ tới trường đang được kiểm tra gõ: "email",//loại kiểm tra: thông thường, email, tiêu đề số:"ví dụ: nhập email của bạn vào đây", //gợi ý về lỗi: true,//nhóm cờ bắt buộc: false,//con trỏ nhóm); var AllChecks=;//và đây là một mảng nơi tất cả các đối tượng được kiểm tra sẽ được lưu trữ
Nếu lập trình viên truy cập trang web khi nó đã được bố trí hoàn chỉnh (nghĩa là hành động diễn ra trong một cuốn tiểu thuyết khoa học viễn tưởng) - thì cách tiếp cận này rất tuyệt vời. Nhưng thường thì chắc chắn sẽ cần phải hoàn thành một việc gì đó, bao gồm thêm các trường bổ sung hoặc tạo các biểu mẫu mới và để lại việc bổ sung các trình xử lý trường cho các nhà thiết kế bố cục, ngay cả khi bạn có một hàm tạo bằng văn bản, đồng nghĩa với việc bạn phải chịu đựng các yêu cầu liên tục từ họ theo kiểu “a” Mọi thứ ở đây đều hỏng rồi.” Và sau đó, bạn sẽ phải quên đi định đề chính của ý tưởng, tự động hóa (chính xác hơn là loại bỏ bản thân, người thân của bạn khỏi những chuyển động cơ thể không cần thiết).
Sau đó, bạn có thể thử nhồi dữ liệu xác minh vào các thuộc tính không chuẩn, biến thuật ngữ ngắn gọn
thành một con quái vật cồng kềnh như Chúng tôi sẽ tập trung vào lựa chọn này. Chúng tôi hướng đến sự linh hoạt.Sau đó, chúng tôi nhập các thẻ được xử lý sau:
| tiêu đề | Tất nhiên, đó là tiêu chuẩn, nhưng ở đây chúng tôi sẽ viết một thông báo về việc điền sai trường. Và chúng ta sẽ hiển thị nó theo kiểu “Specify”+title |
| cfm_check | Cờ xác minh là thứ chúng tôi sẽ sử dụng để tìm kiếm các trường đang được kiểm tra. Và nó có thể nhận các giá trị sau:
|
| cfm_confirminfo | Theo mặc định, lỗi sẽ hiển thị ngay sau khi phần tử được kiểm tra, điều này không phải lúc nào cũng thuận tiện. Vì vậy, hãy để chúng tôi chỉ ra trong thuộc tính này bộ chọn jq cho phần tử mà sau đó lỗi sẽ được hiển thị. Ví dụ: cfm_confirminfo=’#placeForErrors’ |
| cfm_function | Để không làm phức tạp quá tải cfm_check, ở đây chúng ta sẽ viết tên của hàm kiểm tra trường không chuẩn |
Chúng tôi đã nhận được thông tin, việc còn lại là xử lý nó. Thuật toán ở đây không phức tạp:
- Ở đầu vào, chúng tôi cung cấp một con trỏ tới biểu mẫu để thực hiện kiểm tra (chúng tôi có thể có nhiều biểu mẫu trên trang!);
- chúng tôi xem qua các thành phần của biểu mẫu đã chỉ định, kiểm tra xem chúng có được điền chính xác hay không;
- nếu có lỗi, chúng tôi đánh dấu chúng, nếu không, chúng tôi cho phép xác thực biểu mẫu.
Có lẽ đã đến lúc tạo ra mã js thực hiện chức năng này ít nhất một phần, vì một loạt văn bản như vậy đã được viết ra rồi?
If(typeof cFM_classError === "không xác định")//ở đây chúng ta viết lớp css được gán cho các trường sai var cFM_classError="cFM_wrong"; hàm cFM_checktrueAttr(parent)//chuẩn bị dữ liệu để xử lý //(parent là con trỏ jq tới biểu mẫu hoặc khối kết hợp) ( var error=true; //dọn dẹp sau hàm được gọi trước đó $("div." +cFM_classError).remove ();//xóa gợi ý $(".."+cFM_classError).each(function())(//xóa lỗi đánh dấu $(this).removeClass(cFM_classError); )); //tìm kiếm các trường để kiểm tra var inputToHandle=false ; if(typeof parent !== "unknown") inputToHandle=parent.find(""); else inputToHandle=$("");//tốt, nếu cha mẹ không được chỉ định, hãy cùng thực hiện kiểm tra mọi thứ //lấy các phần tử tìm thấy và quan sát chúng inputToHandle.each(function())( if(error) error=cFM_prepareChecking(this);//kiểm tra các đối tượng, tìm kiếm ít nhất một lỗi khác cFM_prepareChecking(this); ) ); trả về lỗi;//trả về true nếu tất cả các phần tử đều vượt qua lỗi và sai nếu ai đó thất bại) hàm cFM_prepareChecking(handle)// bắt đầu kiểm tra một phần tử cụ thể và đánh dấu những phần tử sai ( var error=true;/*return value; ý nghĩa đơn giản là chỉ ra rằng có lỗi lấy giá trị: true - không có lỗi; sai - trường không được điền; "sai" - trường được điền không chính xác;*/ //xác định chữ ký của trường nếu phát hiện thấy lỗi trong đó. Theo mặc định, //"Chỉ định giá trị trường" sẽ được hiển thị nếu tiêu đề không được chỉ định var title = " field value"; if(typeof $(handle).attr("title") !== "undefined" && $(handle).attr("title").length>0) title=$(handle).attr("title"); var after = handle;//куда лепить сообщение об ошибке var attribute = $(handle).attr("cFM_check");//значение великого атрибута cFM_check //а не задали ли какую хитрую функцию для проверки поля? if(typeof $(handle).attr("cFM_function") !== "undefined") var chkFunk=$(handle).attr("cFM_function"); //наконец, проверяем поле if(typeof chkFunk !== "undefined") error=window($(handle)); else error=cFM_checkFullness(handle); //коль ошибка закралась к нам if(error!==true) { //определяем, куда лепим сообщение об ошибке if(typeof $(handle).attr("cFM_confirmInfo") !== "undefined") { after=$(handle).attr("cFM_confirmInfo"); if(after.indexOf("self")===0)//если вдруг селфы непойми зачем прилепили after=after.substr(4); } if(error==="wrong")//коль поле заполнено неправильно $(after).after("!}
Giá trị trường không hợp lệ
"); else( if(error===false)//if $(after).after("
Chỉ định "+tiêu đề+"
");//các lỗi html khác//nếu kiểm tra đặc biệt bằng html đặc biệt $(after).after(""); ) $(handle).addClass(cFM_classError);//thêm một lớp lỗi if($(handle) . attr("type")=="radio")//chúng tôi đang hoàn thiện các nút radio $("").addClass(cFM_classError); error=false; ) return error; ) function cFM_checkFullness(handle)//và điều này chức năng tiêu chuẩn kiểm tra ( var error = true; //đọc dữ liệu từ các thuộc tính var attribute = $(handle).attr("cFM_check"); //cờ bắt buộc var require = true; if(attribute.indexOf("Y")=== -1) bắt buộc=false; //kiểm tra định dạng var format=attribute; if(required) format=attribute.substr(2); switch($(handle).attr("type"))//hãy xem Chúng ta có gì có cái này cho phần tử ( case "checkbox": if(!$(handle).prop("checked")) error=false; break; case "radio"://promised có vấn đề với radio if(!$(handle) .prop("checked") && $(":checked").length==0) error=false; else error=true; break; //cả văn bản, vùng chọn và vùng văn bản đều giống hệt nhau ở đây mặc định: if(( $ (handle).val().trim().length==0 || $(handle).val()=="0") && bắt buộc) error=false; else ( if(format==="num " )//kiểm tra một số ( var regCheck = new RegExp("[^0-9\s-]+"); if(regCheck.test($(handle).val())) error="wrong" ; ) if(format==="email")//kiểm tra email ( var regCheck = new RegExp("^(+[-._+&])*+@([-0-9a-zA-Z] +[.])+(2,6)$"); if(!regCheck.test($(handle).val())) error="wrong"; ) ) phá vỡ; ) lỗi trả về; )
Để làm ví dụ, chúng tôi cũng đưa ra chức năng đặc biệt kiểm tra, ví dụ: kiểm tra sự hiện diện của hai từ trong đầu vào (Tên Họ hoặc Tên, Họ). Đầu vào kích hoạt kiểm tra chức năng này được triển khai như sau:
Và ví dụ, hàm kiểm tra sẽ trông như thế này: function checkName(handle) ( var handValue=handle.val().trim(); //như thực tế cho thấy, người dùng làm bất cứ điều gì để tách họ và tên của họ if(handleValue.indexOf( " ")!==-1 || handValue.indexOf(",")!==-1 || handValue.indexOf(".")!==-1) trả về true; nếu không thì trả về false; ) Thật là một phong cách Chúng ta nên đặt một số kiểm tra của mình: div.cFM_wrong ( color:red; font-size:10px; location:absolute; width:140px; ) input.cFM_wrong( nền: #ffd9d9; border-color: #d3adad; ) Xác thực mẫu tập lệnh.Bây giờ, nếu hàm cFM_checkFullness() hoàn thành thành công (nghĩa là trả về true), tập lệnh sẽ gửi biểu mẫu để xử lý. Cách thực hiện điều này còn tùy vào hình thức cụ thể. Nếu xác nhận gửi thông qua nút gửi, thì bạn có thể đăng ký sự kiện gửi biểu mẫu (onsubmit) và tùy thuộc vào kết quả kiểm tra mà gửi nó hay không. Ví dụ như thế này:
và ở đây, giống như một loạt các thẻ biểu mẫu. Nếu việc gửi được thực hiện bằng ajax, thì mọi thứ đều đơn giản: gọi nó tùy thuộc vào kết quả của hàm cFM_checktrueAttr($(this)); Các rắc rối bổ sung.
Trong đoạn mã trên không có kiểm tra nhóm (vì độ cồng kềnh của mã tăng lên đáng kể và kích thước thanh cuộn của bài viết này có lẽ khiến nhiều khách truy cập sợ hãi). Sự khác biệt trong thuật toán sẽ không đáng kể: việc kiểm tra các phần tử theo nhóm phải được khởi chạy trong một khối riêng biệt và tùy thuộc vào hoạt động của toàn bộ khối, thông báo lỗi sẽ được hiển thị trong một phần tử cụ thể.
Đúng, tại thời điểm này, bạn nên chậm lại và suy nghĩ: liệu có thực sự cần thiết phải sửa đổi mã để hỗ trợ các nhóm hay chúng ta có thể hạn chế viết chức năng riêng biệt kiểm tra một vài trường phức tạp?
Cuối cùng chúng ta có gì? Bằng cách kết nối một vài tệp (.js và .css), chúng tôi có được chức năng kiểm tra thuộc tính mà bạn có thể yên tâm sử dụng trên bất kỳ trang web nào, miễn là jquery được kết nối. Suy cho cùng, sẽ tốt hơn nhiều nếu có sẵn một bộ công cụ làm sẵn hơn là dành nhiều thời gian để tạo ra chúng trước mỗi nhiệm vụ cùng loại.
Kết nối và ví dụĐầu tiên chúng ta cần thư viện jquery. Bạn có thể tải xuống, ví dụ, từ trang web chính thức.
Hoặc chỉ cần chèn dòng vào tiêu đề (nội dung bên trong thẻ) của trang web của bạn
Sau đó tải xuống ( phím phải-> mục yêu thích có từ “lưu”) từ đây là một tệp có mã js và, nếu cần, một tệp có kiểu css cho các trường sai từ đây.
Chúng tôi cũng thêm chúng vào tiêu đề: Bây giờ bạn cần sắp xếp các thuộc tính của các trường biểu mẫu theo, tùy thuộc vào loại kiểm tra bạn muốn thực hiện.
Bước cuối cùng là thêm thẻ sự kiện onsubmit: “onsubmit="return cFM_checktrueAttr($(this));"".
Bây giờ chúng ta hãy thử thực hiện việc kiểm tra một biểu mẫu đơn giản như vậy.
Trong ví dụ của chúng tôi, chúng tôi có 5 trường cần điền vào:- Tên
- tin nhắn
- thư điện tử
- số liên lạc
- kiểm tra số để bảo vệ
Ngoài việc chỉ kiểm tra các trường trống, chúng tôi sẽ hiển thị
cách kiểm tra xem email và số điện thoại của bạn đã được nhập chính xác chưaChúng tôi sẽ kiểm tra các trường với sử dụng JavaScript. Trong trường cuối cùng, bạn phải nhập một số nhất định (để bảo vệ chống lại tự động điền). Nếu các trường trống, một cửa sổ cảnh báo có thông báo sẽ xuất hiện. ĐẾN kịch bản này Chúng tôi đã ngay lập tức thêm việc gửi biểu mẫu đã hoàn thành qua email, chúng tôi sẽ thực hiện việc này bằng PHP.
Vì vậy, hãy tạo một tập tin chỉ mục.php và viết mẫu sau vào đó:
1. Tên của bạn:
2.Tin nhắn:
3. Email
4. số liên lạc
3. Nhập số tiền 10+10
Tạo một tập tin data.js, viết mã xác minh vào đó:
hàm Formdata(dữ liệu)(
/* nếu trường Tên bạn không được điền thì độ dài nhỏ hơn 3-x*/
if (data.fnm != null && data.fnm.value.length< 3)
{
notification("Điền vào trường "Tên của bạn"");
trả về sai;)
/* nếu trường Tin nhắn không được điền */
if (data.text != null && data.text.value.length< 3)
{
notification("Điền vào trường "Tin nhắn"");
trả về sai;)
/*Email của người dùng*/
if(data.email != null && data.email.value.length == 0)
{
notification("Trường E-mail trống");
trả về sai;)
if(data.email != null && data.email.value.length< 6)
{
Alert("Email quá ngắn");
trả về sai;)
if(!(/^w+[-_.]*w+@w+-?w+.(2,4)$/.test(data.email.value)))
{
Alert("Nhập đúng địa chỉ E-mail");
trả về sai;)
/* số liên lạc */
if(data.phone != null && data.phone.value.length == 0)
{
Alert("Trường số điện thoại liên hệ trống");
trả về sai;)
if(data.phone != null && data.phone.value.length< 5)
{
Alert("Trường "Điện thoại liên hệ" phải chứa ít nhất 5 ký tự");
trả về sai;)
if(!(/^+z/.test(data.phone.value+"z")))
{
Alert("Số liên lạc không đúng");
trả về sai;)
/* tạo trường số tiền bằng một số nhất định */
số = document.getElementById("summa");
if (number.value !== "20")
{
Alert("Số tiền chưa được nhập hoặc nhập sai");
trả về sai;)
) Đang tải tập tin này trong tài liệu của chúng tôi, đặt nó giữa thẻ đầu:
Bây giờ thử nghiệm của chúng tôi đã sẵn sàng. Bây giờ, sau khi tất cả dữ liệu đã được nhập, chúng tôi sẽ gửi biểu mẫu cho chúng tôi qua email.
Chúng tôi viết mã php trong tệp index.php:
0
Tôi đang thực hiện yêu cầu ajax tên miền chéo tới trang php của mình trên máy chủ. Tôi đang gửi biểu mẫu từ html qua ajax tới biểu mẫu của tôi trang php trên máy chủ. Các vấn đề với xác nhận phía khách hàng.
Tôi không biết cách xác thực phía khách hàng trước khi gửi biểu mẫu.
biểu mẫu HTML biểu mẫu chuẩn, vị trí của các trường nhập: tên, họ, tin nhắn.... Biểu mẫu HTML của tôi, ở phía máy khách:
đầu ra var = $(".nesa"); $(document).ready(function())( $("#form1").submit(function (e) ( e.preventDefault(); $.ajax(( url: "http://www.example.com / form.php", crossDomain: true, //đặt làm tên miền chéo loại yêu cầu: "post", data: $("#form1").serialize(), beforeSend: function())( // thêm spinner $ (" .spinner"). nối thêm(" 
"); ), thành công: hàm (dữ liệu) ( $(".nesa").html(data); notification("sent " + data); ), error: function())( out.text("Message is chưa được gửi!"); ) )); )); ));
Xác thực như thế nào? Tôi đang cố gắng đặt mã vào sendmail nhưng không gặp may. Hoặc có thể sử dụng submitHandler?
Ý tưởng là khi người dùng nhấp vào nút "Gửi", quá trình kiểm tra này sẽ diễn ra và nếu "dán địa chỉ" không thành công E-mail" Bây giờ khi tôi nhấp vào nút gửi, bạn sẽ gửi dữ liệu đến máy chủ. Tôi muốn các trường đầu vào đầu tiên được xác thực.
Biểu mẫu này thực sự là công việc gửi dữ liệu đến máy chủ nhưng chỉ cần tìm ra cách thực hiện xác thực. Nơi đặt xác thực trong cuộc gọi ajax?
Nhờ vào
- 5 câu trả lời
Sắp xếp:
Hoạt động
0
Vui lòng xác nhận mẫu trước khi gửi Yêu cầu AJAX. Nếu không có lỗi thì yêu cầu ajax sẽ được gửi đi, nếu không thì trả về false. Bạn có thể làm được việc này:
$("#form1").submit(function (e) ( e.preventDefault(); // Lấy giá trị Tên đăng nhập và cắt bớt nó var name = $.trim($("#name").val()) ; // Kiểm tra xem có trống không if (name === "") ( Alert("Trường văn bản trống."); return false; ) ));
Bạn cũng có thể thực hiện chức năng OnKeyUp.
0
Đầu tiên, bạn có thực sự đang sử dụng biểu mẫu AJAX không?
Bạn đã giải thích rằng bạn đang tải biểu mẫu qua AJAX, nhưng bạn có gửi biểu mẫu theo cách tương tự không? Với tôi, có vẻ như bạn đang cố gửi mã HTML. Bạn có thể kết nối với sự kiện nhấn nút gửi trước khi gửi biểu mẫu. Tuy nhiên, vì nút này được thêm vào trang khi chạy nên bạn cần đăng ký một sự kiện trên document .
$(document).on("click", "input", function() ( // Xác thực biểu mẫu // Thêm thông báo lỗi khi thất bại và trả về // Khác gửi biểu mẫu qua AJAX ));
Dù sao, bạn có thể sử dụng sự kiện Blur của jQuery thay thế để kiểm tra từng trường khi người dùng chuyển sang trường tiếp theo, thậm chí bạn có thể kiểm tra mỗi khi người dùng nhấn một phím bằng keypress .
1
Tạo một hàm để xác thực biểu mẫu trả về đúng/sai. Gọi hàm ngay trước $.ajax. kiểm tra xem trả về có sai không thì trả về.. xem ví dụ bên dưới...
If(!validateForm()) trả về sai;
0
Tôi luôn kiểm tra chúng ngay trước khi nhập chúng vào lệnh gọi AJAX. Đây là bài kiểm tra của tôi
$("#form_nieuwsbrief").bind("submit",function())( var name = $("input").val(); var email = $("input").val(); var tiến hành = đúng ; if (name=="")( $("input").css(("border:"2px màu đỏ đậm")); tiếp tục = false; ) if (email=="")( $(" input ").css(("border://2px màu đỏ đặc")); tiến hành = false; ) if(proceed == false)( $("#msg").append("U bent informatie Vergeten in te vullen . "); setTimeout(function())( $(".alert").fadeOut(400, function())( $(this).remove(); )) ;),10000); ) if(proceed = = true) ( // thực hiện cuộc gọi ajax
Đó chỉ là một bản tin chỉ yêu cầu tên và địa chỉ email. Nhưng nguyên tắc là như nhau. Trước khi thực hiện lệnh gọi ajax, hãy tạo câu lệnh if else với biến bạn đặt nếu có gì đó sai. nếu không bạn sẽ tuân theo bước kiểm tra ban đầu của anh ấy để có thể tiếp tục.
Trong bài viết này, chúng ta sẽ bắt đầu xử lý các tập lệnh phức tạp hơn và đầy đủ chức năng hơn. Chúng ta hãy từng bước thực hiện tất cả các giai đoạn - bắt đầu bằng việc đặt ra vấn đề và kết thúc bằng một tập lệnh phổ quát, sẵn sàng để sử dụng. Và hãy bắt đầu bằng cách xác thực biểu mẫu trước khi gửi nó đến máy chủ.
Những cân nhắc chung và mã html của biểu mẫu
Xác thực biểu mẫu có lẽ là một trong những chức năng được sử dụng phổ biến nhất. Đây là một trang web hiếm hoi không có bất kỳ biến thể nào, có thể là gửi tin nhắn đơn giản qua e-mail hoặc một mẫu đơn đặt hàng phức tạp trong một cửa hàng trực tuyến. Lợi ích của tập lệnh là rõ ràng - để kiểm tra xem người dùng đã điền vào tất cả các trường bắt buộc trước khi gửi hay chưa và do đó tránh được vấn đề nhận email trống hoặc bị thiếu thông tin liên lạc người gửi.
Giả sử rằng chúng ta đã có một biểu mẫu và nó bao gồm 4 trường sau: tên, địa chỉ email, chủ đề của tin nhắn và chính tin nhắn đó. Mã html tương ứng cho một biểu mẫu như vậy sẽ trông giống như thế này:
< form action = "/cgi-bin/formmail.cgi" onsubmit = "return sendform();" >
Tên của bạn : *<
input type
=
"text"
name
=
"name"
><
br
>
Địa chỉ email: *<
input type
=
"text"
name
=
"email"
><
br
>
Chủ đề tin nhắn:<
input type
=
"text"
name
=
"subject"
><
br
>
Tin nhắn :<
textarea name
=
"message"
><
br
><
br
>
<
input type
=
"submit"
value
=
"Gửi"
>
<
input type
=
"reset"
value
=
"Thông thoáng"
>
* - các trường bắt buộc phải điền
Lưu ý rằng, không giống như dạng thông thường trực tiếp trong thẻ, chúng tôi theo dõi sự kiện onsubmit và khi nó xảy ra, chúng tôi gọi hàm xác minh biểu mẫu sendform().
Tại sao phương pháp gọi hàm này được chọn? Rốt cuộc, có thể áp dụng sự kiện onclick chẳng hạn? Câu trả lời rất đơn giản - khi được sử dụng sự kiện onclick Nút "gửi" sẽ phải được thay thế bằng nút thông thường. Và nếu hỗ trợ javascript bị tắt trong trình duyệt, chúng tôi sẽ không thể gửi biểu mẫu (!). Việc theo dõi sự kiện onsubmit không có nhược điểm này, bởi vì ngay cả khi hỗ trợ tập lệnh bị tắt, biểu mẫu vẫn sẽ được gửi.
Nếu bạn xem kỹ mã html của biểu mẫu của chúng tôi, bạn sẽ nhận thấy rằng tôi đã đặt dấu hoa thị bên cạnh các trường này và đặt chú thích cuối trang ở cuối biểu mẫu. Tất nhiên, điều này được thực hiện vì sự thuận tiện và sự tôn trọng cơ bản đối với người dùng.
Chức năng xác thực biểu mẫu trước khi gửi
Bây giờ chúng ta hãy chuyển sang vấn đề chính - viết chính hàm sẽ trực tiếp kiểm tra biểu mẫu. Hãy suy nghĩ xem chúng ta cần gì ở cô ấy? Chà, trước tiên, hãy kiểm tra xem các trường bắt buộc đã được điền chưa, thứ hai là gửi biểu mẫu. Nếu một số trường bắt buộc trống, chúng tôi cần tạo thông báo về điều này cho người dùng và di chuyển con trỏ đến phần tử tương ứng.
Đầu tiên, hãy viết ràng buộc chung của hàm:
<
script language
=
"javascript"
>
Phương thức chúng ta sử dụng để gọi một hàm thông qua sự kiện onsubmit yêu cầu trả về một trong các giá trị boolean: đúng hay sai. Và tùy thuộc vào giá trị này, biểu mẫu sẽ được gửi hay không.
Bây giờ chúng ta hãy thử viết kiểm tra chức năng, gắn liền với hình thức cụ thể này. Như bạn nhớ, chúng tôi chỉ có hai trường bắt buộc phải điền: tên của khách truy cập và địa chỉ email của anh ấy. Điều đơn giản nhất là kiểm tra nội dung của từng trường bắt buộc xem có thiếu văn bản không:
<
script language
=
"javascript"
>
Như bạn có thể thấy, hàm xác minh bao gồm hai khối giống hệt nhau, chỉ khác nhau ở tên của trường đang được kiểm tra. Hãy nhận xét từng dòng trong các khối này:
Đầu tiên chúng tôi kiểm tra xem trường này có trống không. Và nếu đúng như vậy thì
hiển thị thông báo lỗi bằng chức năng cảnh báo() tích hợp. Sau khi người dùng đóng cửa sổ, chúng tôi
Hãy sử dụng phương thức focus() và di chuyển con trỏ đến trường bị lỗi. Và cuối cùng
Hãy thoát khỏi hàm bằng cách đặt cờ thành công thành sai.
Nếu trường đang được kiểm tra không trống thì khối tương ứng sẽ bị bỏ qua. Nếu tất cả các khối kiểm tra bị bỏ qua, kết quả hàm sẽ trả về true, điều này cho biết việc kiểm tra thành công.
Chức năng xác minh phổ quát
Nếu chúng ta chỉ cần kiểm tra hai hoặc ba trường, thì chúng ta vẫn có thể áp dụng phương pháp kiểm tra “từng trường một”, nhưng nếu có vài chục trường thì sao? Nhưng điều này không phải là hiếm - đặc biệt là trong các câu hỏi phức tạp. Do đó, chúng tôi sửa đổi một chút chức năng của mình để nó không phụ thuộc vào số lượng trường được kiểm tra.
Trước hết, chúng ta sẽ tạo một mảng trong đó liệt kê tên của tất cả các trường yêu cầu xác minh:
Bắt buộc = mảng mới ("tên", "email");
Cách tiếp cận này sẽ cho phép chúng ta dễ dàng thêm và sửa đổi danh sách các trường bắt buộc mà không cần thay đổi trực tiếp mã của hàm.
Ngoài mảng được mô tả ở trên, chúng tôi sẽ thêm một mảng khác chứa văn bản lỗi cho một trường cụ thể:
Bắt buộc_show = mảng mới ("Tên của bạn", "email");
Điều này sẽ cho phép chúng tôi tự do thay đổi văn bản về các lỗi và sử dụng tiếng Nga một cách chính xác, đồng thời không hài lòng với những cụm từ khó hiểu như “tên chưa được nhập”.
Có một loạt các trường bắt buộc, toàn bộ quá trình kiểm tra có thể được thực hiện trong một vòng lặp. Đây là chức năng kiểm tra được sửa đổi sẽ trông như thế nào:
<
script language
=
"javascript"
>
Trong vòng lặp, tất cả các trường biểu mẫu đều được kiểm tra để xem liệu chúng có khớp với các trường “bắt buộc” hay không. Nếu xảy ra sự trùng khớp, việc kiểm tra sẽ được thực hiện theo cách tương tự như mô tả ở trên, nhưng có một lưu ý - việc đưa vào một mảng có thông báo lỗi yêu cầu sửa đổi một chút hàm Alert(), vì vậy bây giờ văn bản lỗi trực tiếp phụ thuộc vào tên trường.
Về cơ bản là vậy. Chức năng này khá phổ biến và với những điều chỉnh tối thiểu (về cơ bản là nội dung của hai mảng) có thể được điều chỉnh cho phù hợp với mọi hình thức.
| Mặt sau |
