Я новичок в Javascript, поэтому, пожалуйста, потерпите меня. У меня есть это назначение:
Создать класс с именем «Профиль», который имеет три метода: (a) setProfile (n, a, e, t); который принимает четыре параметра и присваивает значения локальным переменным i. Имя, II. Возраст, iii. Электронная почта, iv. Номер телефона и вызывает метод saveProfile (), (b) getProfile (), который считывает локальные сохраненные данные, если они существуют, и отображает значения профиля в соответствующих полях на странице профиля. (c) saveProfile () сохраняет данные профиля в локальном хранилище.
Обновите функцию validateForm () так, чтобы: a. Имя не может быть менее 3 символов. б. Возраст должен быть от 12 до 95 лет. c. Адрес электронной почты является действительным адресом @ ntnu.no. д. Номер не может быть более 7 цифр. е. Убедитесь, что ни одно из полей не является пустым.
Создать объект «myProfile» класса «Профиль» в функции с именем «UpdateProfile». Добавьте следующие функции в эту функцию: a. Проверьте поля. б. setProfile () только когда поля проверены.
Эта функция «UpdateProfile» вызывается, когда пользователь нажимает кнопку «Обновить» (1. c).
Создайте функцию с именем displayProfile (), которая вызывает метод getProfile (). Вызовите displayProfile () при загрузке страницы, чтобы при каждом запуске страницы профиля. html, если данные сохранялись локально, форма заполнялась сохраненными данными.
Чего я не понимаю, так это как «прочитать локальные сохраненные данные и отобразить значения профиля в соответствующих полях на странице профиля». Методы должны работать вместе, как не так?
Вот мой код:
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body onload="displayProfile()">
<h1> Profile </h1>
Your Name
<form name="Login" method="post" action="#" onsubmit="return validateForm()">
<input type="text" name="fName" id="FN"> <br>
Age <br>
<input type="text" name="ageField" id="age"> <br>
Email <br>
<input type="text" name="email" id="e"><br>
Number <br>
<input type="text" name="number" id="num">
<input onclick="saveProfile(); UpdateProfile();" type="submit" name="sub" value="Update">
</form>
<script type="text/javascript">
class Profile {
setProfile(n, a, e, t) {
this.name = n;
this.age = a;
this.email = e;
this.telephoneNumber = t;
this.saveProfile();
}
getProfile() {
document.getElementById("FN").value = name;
document.getElementById("age").value = age;
document.getElementById("e").value = email;
document.getElementById("num").value = telephoneNumber;
}
saveProfile() {
let storeName = document.getElementById('FN').value;
localStorage.setItem('name', storeName);
let storeAge = document.getElementById('age').value;
alert(storeAge);
localStorage.setItem('age', storeAge);
let storeEmail = document.getElementById('e').value;
localStorage.setItem('email', storeEmail);
let storeNum = document.getElementById('num').value;
localStorage.setItem('number', storeNum);
}
}
function validateForm() {
var x = document.forms['Login']['fName'].value;
if(x==null || x=="")
{
alert("Please enter your name");
document.getElementById('FN').focus();
//return false;
} else if (x.length < 3) {
alert("Password must be over 3 characters");
document.getElementById("FN").focus();
//return false
}
a = document.forms['Login']['ageField'].value;
if(a==null || a=="")
{
alert("age can not be empty");
document.getElementById('age').focus();
//return false;
}
else if(parseInt(a)<12 || parseInt(a) > 95)
{
alert("age should be between 12 and 95");
document.getElementById('age').focus();
//return false;
}
//https://www.udemy.com/blog/javascript-validation-2/?utm_source=adwords&utm_medium=udemyads&utm_campaign=DSA_Catchall_la.EN_cc.ROW&utm_content=deal4584&utm_term=_._ag_88010211481_._ad_398022934994_._kw__._de_c_._dm__._pl__._ti_dsa-406594358574_._li_1010781_._pd__._&matchtype=b&gclid=EAIaIQobChMI5p7VzI7V6AIVDImyCh31oAylEAAYASAAEgK9IfD_BwE
var em = document.forms['Login']['email'].value;
alert(em);
var atpos=em.indexOf("@");
// Create a variable to return the numerical value of .
// within the variable
var dotpos=em.lastIndexOf(".");
// Compare the numerical values
if (atpos<1 || dotpos<atpos+4 || dotpos+2>=em.length)
{
alert("Not a valid e-mail address");
//return false;
} else if (em==null || em=="")
{
alert("Please enter your email adress");
document.getElementById('e').focus();
//return false;
}
var numb = document.forms['Login']['number'].value;
if (numb==null || numb=="") {
alert("Please enter your phone number");
document.getElementById('num').focus();
//return false;
} else if (numb.length > 7) {
alert("Phone number can't be more than 7 digits");
document.getElementById('num').focus();
//return false;
}
}
function UpdateProfile() {
myProfile = new Profile;
myProfile.validateForm();
if (myProfile.validateForm()) {
myProfile.setProfile();
}
}
function displayProfile() {
getProfile();
}
</script>
</body>
</html>